list-style-image是指将列表后面的项目符号设置为图片图标。
list-style是缩写属性，与font属性类似，但属性的数量和顺序不固定。
!重要属性
该属性用于增加属性的权重。 属性减少后，其权重值为无穷大。
p{
color: #foo !important;
}
当心：
类属性
一个标签可以携带多个类名，即携带多个类属性值，各个属性值之间用空格分隔
<p class="值1 值2 值3"></p>
优势：
注意，如果一个标签中的多个类名前面都设置了相同风格的haul，仍然会出现风格冲突。 以CSS中的代码为标准，与HTML中class的属性值无关。
背景样式属性
属性值含义
背景颜色
#ff0000，红色，RGB(255,0,0)
背景颜色
背景图
url（图片路径和名称）
背景图片，需要设置宽度和高度
背景重复
重复、重复 x、重复 y、不重复
背景图片是否重复
背景位置
中心等
背景图像起始位置
背景附件
滚动、固定
设置背景图片固定或随页面其余部分滚动，默认为固定
背景
url(1.jpg)，不重复，居中，居中
设置背景的简写
.box{
width: 1000px;
height: 1000px;
background-color: #f00;
background-imgage: url(1.jpg);
background-repeat: repeat-x;
background-position: left top;
background-attachment:
}
背景位置
两者可以混合使用
英语
水平位置，左、中、右
垂直位置、顶部、中心、底部
固定值
100px100px
比率
50%50%
显示属性
“显示”的意思是它是用来在内联元素和块级元素之间进行转换的！ 显示隐藏的元素或隐藏显示的元素。
属性值：inline（内联）、block（块级）、none（无）
block将行内元素转换为块级元素，inline的作用就是将块级元素转换为行内元素
span{
width: 100px;
height: 100px;
background-color: #f00;
display: block;
margin-bottom: 20px;
}
display:none 隐藏显示的元素
display:block 显示隐藏元素
以上两个主要是JS使用的。
位置
用于实现元素的定位
位置：相对
相对定位
立场：绝对
绝对定位
位置：固定
固定定位
使用定位属性时，必须与定位坐标配合使用，包括left;right;top;bottom。
指示定位元素距 xx（右）有多远。
固定定位，相对于浏览器窗口定位，无论页面如何滚动，固定定位元素的显示位置都不会改变
特征：
/*使用固定定位来实现顶部的按钮*/
*{
margin: 0;
padding: 0;
}
a{
width:60px;
height:60px;
display: block;
background-color: #cc;
text-align: center;
line-height: 30px;
text-decoration: none;
color: white;
font-weight: bold;
position: fixed;
right: 30px;
bottom: 100px;
}
相对定位
相对于“原来的自己”来定位。
特征：
注意：相对定位的元素会在家乡留下一个洞，所以很少单独使用，通常与绝对定位一起使用
input[type="text"]{
font-size: 36px;
}
input[type="botton"]{
position: relative;
top: 6px;
}
绝对定位
绝对定位元素是相对于“祖先定位元素”定位的！
对于绝对定位的元素，它会首先查找其父元素是否有定位元素集。 如果设置了positioned属性，则会相对于其父元素定位； 如果没有，还会查找其父元素上层元素是否有设置本次推送的定位属性。 如果两者都不是，它将相对于“浏览器窗口”定位。
特征
案子
.box{
width: 308px;
height: 196px;
border: 1px solid #f00;
margin: 100px auto;
position: relative;
}
.box span{
position: absolute;
left: 20px;
top: -10px;
}
绝对定位情况 z-index
z-index 表示谁覆盖谁，值较大的将覆盖值较小的。
特征：
标准文档流程
制作HTML网页时，必须遵守一个“流”规则：从左到右css下阴影，从上到下
当心
漂浮
需求：让多个元素排在同一行，但设置这些元素的长度和高度。
后者是行内元素的特性css下阴影，前者是块级元素的特性。
标准文档流中只有两种类型的元素：块级元素和内联元素。 您不能两者兼得，只能将这些元素从标准文档流中分离出来。
浮动允许将元素从标准文档流中取出。
元素名称值
漂浮
左边; 正确的
浮动特性：
.div{
width: 100px;
height: 100px;
background-color: #f00;
float: right;
}
小知识点-默认内边距和外距
通用选择器消除了HTML中所有标签默认的内边距和外距，明确后就不会影响我们的排版布局，然后就是编译CSS的第一步。
*{
margin: 0px;
padding: 0px;
}
删除浮动
只要有浮料，就一定有浮料的去除。
因为浮动元素的存在，会影响其下方元素的排版布局，并且浮动元素的父元素不会包裹浮动元素。
消除浮动的三种方法
包包模型包
CSS中包的组成部分：内容（content）+内边距（padding）+边框（border）+外边距（margin）。
bag的主要属性：width、height、content、padding、border、margin
包包型号图
袋子的总长度=袋子上部内容物的长度+左右两侧的填充物+左右两侧的边框线
填充
padding有4个方向，有两种描述方法
利润
表示外距离的含义，与padding的描述相同。
边缘塌陷现象
.div1{
background-color: #f00;
margin-bottom: 20px;
}
.div{
background-color: #00f;
margin-top: 40px;
}
居中
当margin的值设置为auto时，包将水平居中。
.box{
width: 100px;
height: 100px;
backgroud-color: #f00;
margin: 100px auto;
}
使用时注意：
善于利用父元素的padding而不是子元素的margin
边缘塌陷现象
margin属性的初衷是描述兄弟元素之间的关系，而不是描述父子元素之间的关系。 如果是兄弟关系，最好为其父元素使用padding属性。
边界
边框三要素：粗细、线型、颜色
句子格式：粗细线颜色；
.box{
width:100px;
height: 100px;
border: 1px solid #f00;
}
边框的颜色可以省略，默认值为蓝色。
线型
边框线型案例
框架的四个方向属性
四方向属性
边框顶部
边框底部
左边框
右边界
CSS3
CSS3=CSS2+新句型+属性
即对css2进行扩充、删除和优化
结构体伪类
选择器功能
E：第一个孩子
匹配第一个儿子
E：最后一个孩子
匹配最后一个儿子
E:第n个孩子(n)
匹配第 n 个儿子
E:第n个孩子(2n)
匹配素数的儿子
E：第n个孩子（偶数）
匹配素数的儿子
E:第n个孩子(2n+1)
匹配素数的儿子
E：第n个孩子（奇数）
匹配素数的儿子
E：独生子女
比赛只有一个女儿
.box ul li:first-child{
属性: 值;
}
边框折叠属性
该属性主要用于合并表格的边框线，效果是变细。
边界崩溃：崩溃；
border-collapse 属性伪元素
选择者功效
:第一个字母
对当前元素的第一个字进行操作
：第一行
操作当前元素的第一行元素
：：前
之前插入造口袋内部的顶部
：：后
稍后插入造口袋内部的最后端
文字阴影
text-shadow：水平阴影垂直阴影模糊距离阴影颜色
数值描述
h 阴影
必需的; 水平阴影的位置； 允许负值
V形阴影
必需的; 垂直阴影的位置； 允许负值
模糊
选修的; 模糊距离
颜色
可选，阴影的颜色
描述;
颜色参考表
袋影
box-shadow：水平阴影 垂直阴影 模糊距离 阴影规格 阴影颜色 内/外阴影
前两个属性值是必需的，后面的属性值是可选的。
圆角正方形
边框半径：左上、右上、右下、左下
与padding的属性取值方法类似，顺时针方向，只能写一个、两个、三个、四个参数。
如果需要椭圆边框，可以将属性值设置为长度的一半。
CSS 透明度
只要是颜色，透明度都可以
rgba(白、红、白、透明)
透明度的值在0到1之间，0表示完全透明。
发表评论