CSS样式、选择器、浮动、定位、盒子边框，理论知识

1.CSS：层叠样式表
background-color；背景颜色
font-size；文字大小
font-family；字体类型
color；字体颜色
list-style:none；去小黑点
text-decoration:none；去下划线
text-alingn:center；居中或水平居中
line-height：50px；垂直居中
border-bottom：2px solid red;直线 为2px 红色
list-style-imge:ur：（图片）
cursor：pointer；鼠标进入有小手 这个用于为类选择器hover中
CSS引入方式：
行内引入：

内部引入：head标签内
借助style
外部引入：
优先级：就近一致
2.选择器：
基本选择器：
标签选择器、元属选择器 比如

类型选择器：class属性
比如

.点
ID选择器：id属性 比如

# 井
ID选这群>类选择器>标签选择器
后代选择器：
1. .box p{
选中所有的孩子
}
2. .box>p{
选中直接孩子
}

属性选择器：

<input type=“password” name=“uname” id="“value=”" />
input[type=‘text’]
为类选择器：
<a href=“百度链接” target="_blank"
a: link{}:超链接没有访问前默认状态
a: visitied{}:超链接已经访问后默认状态
a: hover:{} 当鼠标悬停的时候 显示的状态
a: active{}:鼠标按下时的状态
遵从爱恨原则 lovehate
选择器：hover常用
3.浮动：
浮动后一定不会挡住文字
可以让块级元素 在一排显示
块级元素：独占一行显示
行内元素：一行可以展示多个元素
使用浮动的元素 会脱离文档流
浮动既可以向左符 也可以向右浮
float:left;向左
float:right;向右
消除浮动的影响
overflow:hidden;
设置高度
在被影响的元素上 +样式 clear:both;
4.定位：
position：stati；:静态的
position：releative；相对的 相对本身原来的位置进行定位不会释放自己之前的位置top；上边的边距 left；左边的边距
position：absolute；绝对定位 会脱离文档流 相对已经定位的父元素进行定位，如果沿着继承关系 都没有发现定位的父元素 则 相对 body进行定位
top：上边的边距 left：左边的边距
position：fixed:固定定位
top：上边的边距 left：左边的边距
z-index； 值越大 代表距离用户越近
5.盒模型：
margin:外边距
padding:内边距
border:边框
content:内容
6.边框：
margin：0px auto；上下左右平分
border：1px solid red； 设置边框为1px的实线 颜色为红色
border-radius：50% 设置圆角 值越大 园越厉害
left：10px solid； 设置一边
7.快速生成法：
div.box>ul>li5>a[href=“连接”]>{内容}
一个div class名为box 下一个ul下五个li 下一个a标签加着连接
div.wenzi>ul>li7>div>a>img[src=“img/ico$.jpg”]+p{重点旅客预选}
前面和上边一样+p就是前面基础上加一个p标签

本文地址：https://blog.csdn.net/weixin_45290168/article/details/107290423