选择器优先级
判断
根据选择器的权重(值)进行优先级判断
id 选择器 100
类/伪类 选择器 10
标签选择器 1
注意:
1.组合选择器的权重,由各个选择器的权重相加得到
2.选择器的优先级与书写顺序无关,只看权重
3.行内样式的优先级最高
尺寸与边框
尺寸
尺寸单位: px 像素,最常用的单位,也是游览器默认单位% 百分比 占据父元素对应属性的占比-----------------以下为绝对单位,不常用----------------
in 英寸 1 in = 2.54 cmpt 镑 1 pt = 72/1 incm 厘米mm 毫米注意: css 中的尺寸单位是不能省略的 0 除外
尺寸属性: 作用:
改变元素的宽度和高度
属性 width height
取值为数值,单位为px 或 %
使用:所有的块级元素可以设置宽高
默认情况下宽度与 父元素保持一致,
高度由内容决定;
所有的行内元素不可以设置宽高,大小由内容决定
内容溢出处理:属性: overflow
取值: 1.visible 默认值,溢出部分可见
2.hidden 溢出部分隐藏,不可见
3.soroll 设置内容滚动显示,显示滚动条
4.auto 自动,当内容溢出时,
自动添加滚动条并且可用
注意:
scroll 表示显示水平和垂直方向的滚动条,
不管是否真的需要
auto 根据内容需要,
添加水平或者垂直方向的滚动条
颜色
颜色取值: 英文单词 red green blue…取值十六进行 #aabbcc每两位一组代表一种三原色,
三组分别对应红绿蓝
每一位取值范围 0-9 a-f
短十六进行 #abc由三位组成,每一位就代表一种三元色
游览器在渲染时会自动对每一位进行重复,
补全成六位的十六进行 #abc = #aabbcc
Css 提供的颜色表示法rgb(r,g,b)每个值取值 0 – 255
红色 rgb(255,0,0)#f00 red
Css 提供的颜色表示法rgba(r,g,b,alpha) 颜色取值0 – 255
alpha 表示透明度 取值0-1 (透明-不透明)
边框
属性 border取值 border-width 宽度border-style
设置边框线的样式,取值
Solid 实线Dashed 虚线Dotted 点线Double 双线(不常用)boreder-color 颜色
transparent 表示透明色
特殊用法取消边框 border :none;
单边框设置:border 属性用来设置 上右下左
四个方向的边框
四个方向单独设置边框:
Border-top : 5px solid red;
Border-right: 10px solid green;
Border-bottom:10px solid green;
Border-left:10px solid green;
网页三角标制作 元素尺寸为0为元素添加四个方向的边框设置其中三条边框颜色为透明
圆角边框
属性: border-radius
取值: px 或 %
作用: 将边框的直角变成圆角
例子:
border-radius : 10px;
表示四个角都按照10px的半径取生成圆角
border-radius: 5px 10px 15px 20px;
四个值代表了上右下左四个角
border-radius:10px 20px;
第一个值表示上下,第二个值表示左右
border-radius 5px 10px 15px;
第四个值默认跟第二个值一致
注意:边框圆角在元素不设置边框的情况下依然有效,
可以通过设置50%
呈现圆形或椭圆形,修改元素形状
边框阴影
属性:box-shadow
取值:h-offset v-offset blur spead color;
h-offset : 表示阴影的水平偏移距离
(取值数字 正数向右偏移 负数向左偏移)
v-offset : 表示阴影的垂直偏移距离
(取值数字 正数向下偏移 负数向上偏移)
blur: 阴影的模糊程度
(取值数字 值越大越模糊)
spread :阴影扩大或是缩小的距离
(取值数字 正数会扩大 负数会收缩)
color: 设置 阴影颜色
游览器坐标系
默认游览器左上角为原点,
向右向下为x轴y轴的正方形,
向左向上为负方向
盒模型/框模型
1.元素皆为框
作用:
元素在文档中占据尺寸的计算方式
组成:外边距margin 边框border 内边距 padding 内容尺寸
计算方式:
标准盒模型:
最终width = 左右外边距+左右边框+左右内边距+内容宽度
最终height= 上下外边距+上下边框+上下内边距+内容高度
(了解)怪异盒模型:
元素内容宽度 = 左右内边距+边框+内容
外边距:
元素边框与边框之间的具体
语法:
属性 margin(2) 取值:
margin :10px ;
表示上右下左四个方向都设置10px外边距
margin : 10px 20px;
表上下为10px 20px
margin : 10px 20px 30px;
表示上右下左四个方向的外边距
(3)特殊值:
margin : 0 auto;
表示自动,可以用来设置元素居中
(4) margin 取值可以分为正负
正值: 代表正方向
负值: 代表负方向
margin 设置为负值,元素将进行偏移
(5)四个方向单独设置外边距
margin-top 设置上方的外边距
margin-right 设置右边的外边距
margin-bottom 设置底部外边距
margin-left 设置左边外边距
取值同样是数值,取一个值
(6)具有默认外边距的元素:
body, h1 , h2 , h3 , h4 , h5 , h6 , p , ul , ol{
margin:0;#取消默认外边距
}
内边距padding
元素的内容与元素边框之间的距离
通过设置width height 属性,
实际上设置的是元素内容的大小
使用:
属性 padding取值 数值,可以给定 1/ 2/ 3/ 4/个值Padding: 2px;
上右下左四个方向都为2px的内边距
Padding: 10px 20px;
Padding: 10px 20px 30px;
Padding: 10px 20px 30px 40px;
具有默认内边距的元素ol, ul, input(文本框,密码框,按钮会存在)
ol, ul, input{
padding:0;
}
页面开发时,清除游览器的默认边距
body,ul, ol, h1, h2, h3, h4 ,h4 h5 ,h6 ,p{
magin:0;
Padding:0;
}
input 可以根据需求单独设置
盒模型属性的支持度
盒模型属性:margin border padding width height块元素对盒模型属性完全支持行内元素对盒模型属性部分支持:
行内元素可以设置 左右 的内外边距
不可以设置 宽高 及 上下外边距
元素类型转换
属性: display
取值:
inline 行内元素
block 块元素
inline-block 行内块
none 元素隐藏
文本居中显示
水平居中:text-align:center;
垂直居中:设置隐藏 高度height与行高
line-height:保持一致