标签：text 实现 取颜色 height bottom 十六 块级元素 sub 式表
1 选择器的优先级
选择器的优先主要考虑选择器的权重
可以将各种选择器的权重以数值来表示，数值越大，优先级越高
| 选择器 | 权重值 |
| 标签selector | 1 |
| 类选择器 | 10 |
| ID选择器 | 100 |
| 行内样式 | 1000 |
复杂选择器优先级的计算：
1 群组选择器不参与计算
后代和子代选择器，各种选择器权值
2 伪类选择器的权值与类选择器保持一致，都是10
2 尺寸单位
1 。px ：像素单位，浏览器默认单位
2 %：百分比，参照父元素对应属性的值计算
3 in : inch 英寸 换算： 1 inch = 2.54cm
4 pt :磅 ，1 pt = 1/72 in
5 cm
6 mm
补充：
7 em:默认情况下，字体大小为16px, 1 em =16px
3 颜色取值
1 英文单词
2 rgb()表示法：
根据红绿蓝三原色组合呈现不同的颜色
每个值取值范围 0~255
3 rgba(r,g,b,alpha)表示法
rgb三原色取值范围 0~255
alpha透明度取值范围0 （透明）-1（不透明）
4 颜色的十六进制表示法
把三原色的十进制范围 0~255 转换成十六进制表示
十六进制的取值范围：0-9 a-f
0-255 换算成十六进制 00-ff
语法：#开头，跟 上 6位的十六进制，每两位为一组表示一种三原色
5 短十六进制表示颜色
# 开头，采用三位十六进制代表三原色
浏览器在解析时，会自动会对每一位进行重复，补全成长十六进制
3 HTML 标签分类
1 块级元素：
特点：
1 独占一行，不与其他元素共行
2 可以手动调整宽度
3 默认情况下，块元素的宽度与父元素保持一致
常见块元素：body h1-h6 div ul ol li table form p
2 行内元素：
特点：
1 可以与其他元素共行显示
2 不可以手动调整宽高大小
3 实际大小由元素的内容多少决定
常见行内元素： span label i b s a sup sub strong
3 行内块元素：
特点：
1 可以共行显示
2 可以手动调整宽高
常见的行内块元素 img input button
尺寸与边框
1 尺寸
1 属性：
width height 分别设置元素的宽高大小
取值：像素值或是百分比
注意：块元素和行内块元素可以设置宽高属性
2 溢出处理
溢出处理，内容超出元素尺寸范围，称为内容溢出,默认情况下，溢出部分仍然可见
属性：overflow 可以处理内容溢出
取值：
1 visible 默认值，溢出部分仍然可见.
2 scroll 添加滚动条,包含水平和垂直方向，不管该方向有没有发生内容溢出，都显示滚动条
3 auto 自动添加滚动条
4 hidden 隐藏溢出部分
2 边框
1 边框实现：
属性：border
取值：border-width border-style border-color
边框宽度，样式，颜色，三个值缺一不可（即使有些值是默认的）
border-width :取像素值，设置四个方向边框宽度
border-style :边框样式
取值：
solid 实线边框
dashed 虚线边框
dotted 点线边框
doule 双线边框
border-color ;设置边框颜色，取颜色值
注意 ：
1 使用border 属性为元素设置边框，是同时设置 上 右 下 左 四个方向的边框
2 取消默认边框，border : none；常用于按钮
2 单边边框的设置
属性：
1 border-top :设置顶部边框
2 border-right :设置右边边框
3 border-bottom :设置底部边框
4 border-left :设置左边边框
取 值：border-width border-style boder-color
3 网页三角标制作：
1 设置空的块元素，宽度为0
2 为元素设置等宽的边框
3 调整边框颜色，显示一个方向的边框，其余边框设置透明边框颜色 transparent
注意：四个方向的边框缺一不可，缺少的话，边框会恢复成矩形边框，不再是三角形
4 轮廓线
属性：outline
取值：width style color
注意：轮廓线围绕在元素内容区域四周，与边框类似，但有区别：轮廓线在网页中不占位，边框在网页中是实际占位的
取消轮廓线：outline:none ;
5 圆角边框
1 属性：border-radius
2 取值：像素值或者百分比
1 border-radius:20px
一个值表示四个角都以20px 做圆角
2 border-radius:20px 40px
取两个值，按照上右下左顺时针方向设置圆角，从左上角开始，依次取值，在给两个值的情况下，上下保持一致，左右保持一致
3 border-radius: 10px 20px 30px ; 三个值，左右角一致，对应的角值是一致
3 百分比取值实现元素形状改变
border-radius;50%;
注意：使用百分比设置圆角边框时，是参照当前元素的尺寸进行计算的
如果元素本身是长方形，设置50%的圆角会变成椭圆
如果元素本身是正方形，会变成正圆
6 盒阴影
属性：box-shadow
取值：
offset-x 阴影的水平偏移距离，取像素值
offset-y 阴影的垂直偏移距离，取像素值
blur 阴影的模糊程序，取像素值，值越在越模糊
spread 阴影的延伸距离（可选），取像素值，可以扩大阴影的范围
color 设置阴影颜色（默认为黑色）
注意：不管是浏览器窗口中还是元素本身，都存在坐标系，都以左上角为（0，0）点，向右，向下代表x 和y 轴的正方向
5 盒模型（框模型）
1 在css中。认为一切元素都是框，都是矩形区域
盒模型：计算元素在文档中的实际占位情况
副模型组成：margin(外边距) border
padding(内边距) content(元素的宽高尺寸)
元素在文档中实际尺寸的计算：
默认情况下：
最终宽度 = 左右外边距+ 左右边框宽度+左右内边距+width
最终高度 = 上下外边距 + 上下边框 + 上下内边距 + height
2 margin
1 margin表示外边距：元素边框与其他元素边框之间的距离
2 取值：像素值
1 .margin :10px
表示设置上右下左四个方向都为10px的外边距
2 margin:10px 20px
表示设置上下外边距为10px，左右外边距为20px;
3 margin:10px 20px 30px;
表示上右下左四个方向上的外边距分别为：
10 20 30 20
4 margin: 10px 20px 30px 40px;
分别设置四个方向的边距值
3 单方向外边距的设置
1 属性：
1 margin-top:上方外边距
2 margin-right:右边的外边距
3 margin-bottom: 底部外边距
4 margin-left:左边外边距
2 取值：像素值
只给当前方向设置外边距，给一个值
4 特殊取值：
1 。margin:0; 设置元素外边距为0 ，常用于初始化页面样式，取消一些元素的默认外边距
2 。margin:0 auto;设置左右外边距自动，用来实现元素的居中效果。auto只对左右外边距起作用
3 。取负值：
会移动元素的位置，负值表示向上向左移动元素，常用于页面元素位置的微调
5 自带默认外边距的元素：
body h1-h6 p ul ol
标签：text 实现 取颜色 height bottom 十六 块级元素 sub 式表
原文地址：https://www.cnblogs.com/Skyda/p/9768136.html
