css3基本属性

一、css属性：
1、层叠性：当出现相同的选择器时，属性冲突的时候，后面的属性会把前面的属性
覆盖掉。

2、继承：当存在父子关系的时候,子元素会继承父元素的部分属性

注意： a标签不会继承颜色；h标签不继承字体大小

3、优先级：当有多个选择器作用在同个元素上时，到底谁有效果？

优先级顺序：继承性 < 通配符 * < 标签选择器 < 类选择器 < id选择器 < 行内样
式 < ! important(影响的只是单一的属性)

4、权重计算：当有多个复合选择器作用在同一个元素上时哪个有效？

权重顺序确定方式：
1）确定选择器是否直接作用到目标选择器，若没有则是继承，继承的权重为0（是个
人都能干掉它）
2）确定是否有行内样式以及！important，若没有则权重最高。
3）数数
4）先数id,id多的权重最高
5）再数类，类多的那么权重高
6）最后数标签 ，如果标签多的那么权重高
7）当权重相同（相同的选择器）时，考虑后来者居上（层叠性）

5、行高：控制文本的垂直位置。
当文本没有设置高度时，行高就是容器的高度。
line-height:300px;
font :20px/300px "楷体"
font中有个隐藏属性：行高,且行高需要卸载font的前面，否则不能实现垂直方向上
的居中显示。

 

6、首行缩进：text-indent(一般用于隐藏不需要看到的文字，如logo)

7、常用属性：autofocus(自动获得焦点)
multiple(多文件上传)
autocomplete(需要添加“name”属性方可有效使用，控制表单是否有
自动完成属性，即自动记录文本框历史输入的值)

accesskey="k"（可利用快捷键获得焦点:alt+k即可定位到指定位置，
一般不常用）

 

二、选择器

1、结构（位置）伪类选择器 （冒号前面加上选择器不能加空格）
:first-child(选择第一个子元素)
:last-child(选择最后一个子元素)
:nth-child(n)(选择第n个子元素)

2、目标选择器：被选中目标的样式控制（:target 即可，不需要在冒号前面加上a）

:target {
background-color: red;
}

<a href="#one">第一句</a>
<a href="#two">第二句</a>

<p id="one">这是一个寂寞的天</p>
<p id="two">下着有些伤心的雨</p>

3、图片水平方向上对齐使用的是 vertical-align: middle;

4、属性选择器：
1）通过属性名和属性值来控制元素：
eg. li[type="pinnk"] {
color:pink;
}

2)通过属性名来控制元素：

eg.li[type] {
background:#fff;
}

<ul>
<li type="pink">3</li>
<li type="">3</li>
</ul>

5、伪元素选择器

div::first-letter {控制第一个字}
div::first-line {控制第一行文本}
div::selection {控制被选中文本}

6、before与after伪元素
使用该伪元素时必须要有“content”关键字

div::before/after{ 当你无法改变html结构代码又必须添加元素时就要使用该伪类
元素}

7、块级元素：block:
1）一行显示一个,独自占据一行
2）可以设置宽高
3）若是不写宽度，则默认宽度就等于父盒子的宽度。
4）有自己的宽度后，使用margin：0 auto;可实现盒子水平居中自适应。
h,div,p,ul,ol,li

8、行内元素 ：inline:
1）一行可以显示多个
2）没有办法设置有效宽高,由内容决定
a span

9、行内块元素：inline-block:
1）一行可以显示多个
2）可以设置有效的宽高
img input

三、边框属性

1、边框合并属性: border-collapse: collapse;

2、边距问题：
1）padding:内容到边框的距离
2）margin:盒子与盒子之间的距离
3）margin垂直塌陷：两个垂直排布的盒子，分别设置了相应的margin,距离
不会相加，而是取两者之间的最大值

4）margin包含塌陷：存在父子关系的盒子，若给子盒子添加一个margin-
top，只有margin-top会把父盒子带跑（解决方式BFC：overflow:hidden;
块级格式化上下文，让内部布局不影响外部）
注意：位置使用规则：宽高能解决的不用padding,padding能解决的不用margin

3、margin的共享问题：

两个盒子并排显示，给其中一个盒子设置margin-top,剩下的盒子也会拥有margin-
top的值。

4、行内元素（a/span）的特殊性：添加垂直方向上的padding和margin是无效的。

四、盒模型

1、盒子的真实宽高（浏览器运行之后的结果）计算：
设置的宽高 + border + padding

2、盒模型：
1）外扩模型 box-sizing:content-box(盒子大小为: width + border + padding)默
认符合w3c标准。

2）内减模型 box-sizing:border-box(盒子大小为: width)即border和padding包含
在width中的，border和padding会去压缩内容的空间。

五、浮动
1、初始化代码
* {
margin: 0;
padding: 0;
/*清除默认的内外边距*/
}

a {
text-decoration: none;
color: #000;
/*清除a标签的下划线,以及修改默认颜色*/
}

input {
border: 0 none;
/*清除边框*/
outline: 0 none;
/*清除外轮廓线*/
}

body {
background-color: #ccc;
font: 12px/100% "微软雅黑";
/*行高如果用百分比设置:等于字体大小乘以这个百分比*/
}

1、浮动的初始目的：解决文字环绕图片布局。现在的目的：用于定位

2、浮动的特点：
1）实现模式转换：行内、块级元素可以使用浮动，且盒子与盒子之间没有间隔
2）脱离标准流且不会占据标准流的位置，即浮动起来后原来的位置会被后来者居上
。
3）浮动元素是依次排列的，只跟结构代码的顺序有关。
4）浮动元素顶端对齐
5）当父元素浮动子元素不浮动的时候,会把子元素带跑
6）父子都浮动时子元素的浮动范围就是父元素所在的范围（即不会跑出去）
7）浮动元素前面如果有标准流,那么它只会在原来的位置浮动

3、行内元素的浮动

浮动的元素已经发生模式转换，相当于行内块级元素，所以设置margin-top才有效果
。

 

转载于:https://www.cnblogs.com/LindaBlog/p/10600594.html