CSS的个人理解

一、概念

层叠样式表，主要由属性和属性值（value）组成。（虽然HTML、CSS对代码大小写不敏感，但是属性和属性值对代码大小写是敏感的）

二、工作方式

1.工作原理

由浏览器将CSS和html分别转化为文档对象，组合为DOM文档对象模型，标记语言中的每个元素、属性、文字片段都是DOM树中的一个节点，再由浏览器转换显示。

2.如何应用

（1）内联样式

优先级最高，但由于会造成代码冗余及代码更新任务庞大，一般不采用。

Hello World!
    
This is my first CSS example
  

（2）内部样式表

  



Hello World!
    
This is my first CSS example
  

（3）外部样式表

单独建立一个.css文档
易于代码更新，减少代码冗余。作为新手，这一点也是必须要做到的。

  



Hello World!
    
This is my first CSS example
  

三、语法内容

1.css声明

格式：“property : value”
属性（property）与属性值（value）单词拼写采用美式标准。

2.css声明块

格式：“{property : value; property : value;}”
“;”的丢失最易导致错误。

3.css选择器和规则

格式：“selector {property : value; property : value;}”

（1）层叠（cascade）

1）简单选择器

元素选择器 p
类选择器 .class
ID选择器 #id
通用选择器 *
并且选择器 p.class#id
并列选择器 p,.class,#id

2）层次选择器

后代选择器 parent son，使用空格分割两个选择器
子代选择器 parent>son，使用>分割两个选择器
下一个兄弟选择器 selector+selector，使用+分割两个选择器
之后所有兄弟选择器 selector~selector，使用~分割两个选择器

3）属性选择器（form表单多用）

selector[property]
selector[property=value]
selector[property*=value]
selector[property^=value]
selector[property$=value]
selector[property~=value]

4）伪类选择器

子元素
:first-child
:nth-child()
:first-of-type
状态
:hover
:active
(顺序LVHA:link visited hover active)
:focus

5）伪元素选择器

::after 常用于清除浮动
::before
::first-letter
::first-line

6）特性值：

！important（改变了CSS方式，尽量绕开！）
放在一段style中（1000）
id（100）
.class或伪类或属性选择器（10）
元素选择器或伪元素选择器（1）
后者覆盖前者（按照顺序）

（2）继承

这里不多叙述…………

4.布局

（1）正常布局流

1）div行及元素
2）span块级元素

（2）浮动布局

float:left;
float:right;
clear:both;（清除左右浮动，该元素会换行）

*块级元素一旦浮动之后:
1）脱离了当前文档流，对父级元素失去了支撑的作用，后面的非浮动元素会插入到浮动元素的下面。
2）浮动元素的宽高默认由其内容所决定，但是我们可以为其指定宽高。
3）当浮动元素无法承载子元素的时候，子元素会在下一行显示。
4）浮动元素的margin无法合并。

*浮动引发的问题:
1）子元素浮动会失去对父元素的支撑
解决方案：在所有子元素的末尾添加一个空元素，该空元素须clear:both;
2）如果为子元素的宽度指定绝对值，并且子元素具有边框，在缩放浏览器的时候会错位
解决方案：

1.box-sizing:border-box;
2..right {margin-left:100px;}

（3）定位布局

1）静态定位
2）相对定位

相对于该元素原先位置进行移动

relative:
top
right
bottom
left

3）绝对定位

相对于该元素最近的定位父元素位置进行移动

absolute:
top
right
bottom
left

4）固定定位

fixed

（4）伸缩盒布局

display:flex;