13-CSS系列
关注
分享
扫一扫
13-CSS系列
sinolover
完成项目，就要软硬兼施
展开
-
【译】谨慎使用CSS中的波浪选择器
最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CSS代码臃肿(CSS Bloat)。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为CSS选择器已经很长时间了，甚至IE7都支持。波浪选择器用来选择所有匹配到的兄弟元素。一个例子<ul><li class="something-important">Item...原创 2020-03-11 09:56:00 · 320 阅读 · 0 评论 -
CSS 基础框盒模型介绍
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respectiv...原创 2020-03-07 10:40:54 · 202 阅读 · 0 评论 -
css 块元素、内联元素、内联块元素
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。块元素：块元素，也可以称为行元素，布局中常用的标签，如：div、p、ul、li、h1-h6等等都是块元素，它在布局中的行为：（1）支持全部的样式（2）如果没有设置宽度，默认的宽度为父级宽度100%（3）盒子占据一行、即使设置了宽度代码：<!DO...原创 2020-03-07 10:42:38 · 192 阅读 · 0 评论 -
CSS一个元素同时使用多个类选择器（class selector）
CSS类选择器参考手册一个元素同时使用多个类选择器CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到（样式复用），通常div的class中由好几段组成，如<div class="user login">能被.user和.login两个选择器选中。如果这两个选择器中有相同的属性值，则该属性值先被改为.user中的值，再被改为.login中的值，即重复的属...原创 2020-03-07 10:42:33 · 10934 阅读 · 0 评论 -
CSS块级元素、内联元素概念
CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少文章， 看到所多的是零碎的CSS布局基本知识，比较表面。看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。 可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。但我觉得，这个概念实在太重要了。理解了它，一堆CSS布局的理论都变得易于理解，并且体会到CSS...原创 2020-02-16 09:05:28 · 421 阅读 · 0 评论 -
CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地方。默认情况下块元素，是独占一行的 常见的块元素：div、p、h1-h6、form（只能用来容纳其他块元素）、hr、table、ul、ol等 高度，行高以及外边距和内边距都可控制 宽度缺省是它的容器的100%，除非设定一个宽度 它...原创 2020-02-16 09:04:51 · 270 阅读 · 0 评论 -
第八节 定位
一. 定位介绍 谈到定位，顾名思义，就确定元素的位置，定位分为三种：相对定位、绝对定位、固定定位；分别用 position：relative、position：absolute、position：fixed来表示，它们分别有着不同的用法和使用场景，比如：相对定位通常用来微调元素的位置，用来做字绝父相的父亲；绝对定位用来配合元素动画的移动，用来做字绝父相的儿子；固定定位通常用来做固定在屏幕某处...原创 2020-02-16 09:02:56 · 385 阅读 · 0 评论 -
第七节 浮动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 ...原创 2020-02-16 08:45:37 · 195 阅读 · 0 评论 -
第六节 标准文档流
一.标准文档流 标准文档流包括：块级元素和行内元素。(1). 块级元素 特点： 一个元素单独一行，不与其他元素并行，可以设置其宽度和高度，如果不设置宽度，宽度默认为其父元素的100%。(2). 行内元素特点：与其他元素并行，不能设置其宽度和高度，默认宽度为内容的宽度。二.相互转换(1). 块级元素→行内元素 加上display：inl...原创 2020-02-16 08:40:42 · 482 阅读 · 0 评论 -
第五节 盒子模型
1. 盒模型的五个属性 盒模型主要涉及的属性有：width(宽度)、height(高度)、padding(内边距)、 border(边框)、margin(外边距)。2. 盒模型的两种模式 模式一：width=盒子自身的width （正常情况） 模式二：width=盒子自身的width+左padding+右padding+左border+右border （仅在IE5和IE6+...原创 2020-02-16 08:39:30 · 710 阅读 · 0 评论 -
第四节 CSS继承性和层叠性
一. 继承性 1. 含义：从自己开始直到所包裹的最小的元素，都可以继承一些特有的属性。 2. 作用范围： a.color、text-开头的、line-开头的、font-开头的，均可以继承。 b. 文字样式的，都能继承；所有关于盒子的、定位的、布局的都不能继承。 3. 实例： 二. 层叠性 1. 背景：当多...原创 2020-02-16 08:38:13 · 226 阅读 · 0 评论 -
第三节 入门属性
1.七个基本属性 颜色：color，背景颜色：background-color，字体大小：font-size，加粗：font-weight:bold，倾斜：font-style:italic， 文字居中：text-align:center，下划线：text-decoration：underline。2.相对路径的写法 分两种情况：（原理都是先找被连接文件所在的与自己...原创 2020-02-16 08:36:16 · 189 阅读 · 0 评论 -
第二节 CSS入门介绍
一.背景 这里将陆续介绍前端CSS中相关知识，先介绍CSS2.1，后续会介绍CSS3的相关属性，通过该系列的文章，希望能给准备转战前端的人员一些帮助，同时也帮助自己梳理知识，文章中如有错误，欢迎指出。 下面是CSS2.1第一个阶段的知识框图，后面会陆续更新该系列后续文章。 二.整体介绍 (一).基础介绍 1. 七个基本的入门属性首先要记住，颜色：co...原创 2020-02-16 08:31:18 · 177 阅读 · 0 评论 -
第一节 特有标签
1.设置浏览器兼容版本 <metahttp-equiv="X-UA-Compatible"content="IE=8"> 表示IE浏览器默认版本为8 <metahttp-equiv="X-UA-Compatible"content="IE=edge"> 表示IE浏览器默认选择最高版本2. 手机端特有的标签...原创 2020-02-16 08:25:52 · 164 阅读 · 0 评论