CSS
作者：互联网
标签也叫元素
标签分行标签（行元素）和块标签（块元素）
行元素：不独占一行，设置宽高无效，继承父级属性
块元素：独占一行，设置宽高有效继承父级属性（带有display:block;）
行内块（内联块级）不独占一行，设置宽高有效，继承父级属性（带有display:inline-block;）
行元素:span i em strong b s u a
块元素:h1 h2 h3 h4 h5 h6 p div from ul ol
行内块:input img table
语义化标签:h1-h6 p strong em img a ul ol select textarea table form
非语义标签:span i b u s
CSS是层叠样式表 改变标签的样式
1.CSS引入方式
-行内
在标签上直接写style=" "
<p style="color:red"></p>
-内部（内嵌）样式
在<head></head>标签中写<style></style>中写样式
-外部（外链）样式
<link rel="stylesheet" href="css/lianxi.css">
-引入方式
在<head></head>标签中写
@import url("global.css");
golbal.css外部样式表链接地址
css引入方式优先级顺序
行内>内嵌、外链>引入
内嵌，外链哪个在下面最终应用哪个
2.CSS语法
选择器{
属性：属性值；
属性值1:属性值；
属性值2:属性值2；
......
}
行内样式优先级更高
外部引入链接比引入样式高
3.选择器
①标签选择器、元素选择器
标签{}
h1{} p{} span{} a{}
②类名选择器
通过class=" "起名通过.调用
<p class="quan"></p>
调用.quan
③id选择器
通过id=" "起名通过#调用
<p id=text></p>
id起名，名称唯一
#text{}
标签，类名，id选择器三个优先级：id>类名>标签
id名称唯一，优先级比class和标签要高
④后代选择器
父级子级中间空格，后代可隔辈跳级
父级 子级{}
p span{} .quan span{}
⑤子代选择器
父级和子级通过>链接，逐级写，不能跳级
父级>子级{}
span>b{}
p>span>b 逐级写不能跳级
⑥通配选择器
*{}在通配选择器中写的样式，页面中全部应用，大范围控制样式
⑦群组选择器
body,ul,ol,h1{}
⑧伪类选择器
:hover{}鼠标滑过/鼠标移入
:active{}鼠标点击时
:visited{}鼠标访问过后
⑨交叉选择器
p,text{} a.first{} div.box{}
⑩兄弟选择器
⑩-1属性选择器
id>交叉>后代>通用
交叉>子代>后代>群组
CSS继承属性
1.color
2.font-size
3.font-weight
4.font-family
5.font-style
6.text-align
CSS不继承
边框 border
内边框 padding
外边框 margin
浮动 float
定位postion
颜色值
1，颜色英文名称
red blue yellow pink white black
2.十六进制
#ff6600
0-9 10位数字
a-f 6个字母
3.RGB 三元素
R red红
G green绿
B blue蓝
CSS样式
1.字体样式
-字体类型 font-family
font-family:"微软雅黑";
-字体大小 fon-size
font-size:12px;
网页字体设置都是偶数数字，12 14 16 18等网页最小字体12px
-字体粗细font-weight
font-weight:bold/bolder/100-900
-字体斜体font-style
font-style:itical
2.text系列
-文字位置 text-align
text-align:left 文字居左
text-align:center 文字居中
text-align:right 文字居右
在父级设置宽高 text-align:center,可以使盒子内图片和文字居中
-首行缩进 text-indent
文字首行缩进 text-indent
-文字样式 text-decoration
text-decoration:underline 下划线
text-decoraton:line-through删除线
text-decoration:none 清楚下划线
-文字样式
font-系列
--font-family字体类型 网页常用微软雅黑和宋体两种字体 font-family:"微软雅黑";
--盒子居中 margin:0 auto;
阿里巴巴图标库--https://www.iconfont.cn/
background背景图
-背景图片
background:url();
背景纯色
background:red/#ff6600
-背景尺寸/大小：水平、垂直
background-size:50% 50%;
background-size:100px 100px;根据背景图或者背景区域大小去写像素值
background-size:contain;内容包含
background-zize:cover;覆盖 宽高 盖齐
-背景平铺background-repeat
repeat包含 repeat-x和 repeat-y
no-repeat 不平铺
repeat-x水平平铺
repeat-y垂直平铺
round 缩放背景图至容器大小（非等比缩放）
space 背景图不会产生缩放，会被裁切
-背景定位 background-position
-方位background-position:left top;
水平left 左 center 中 right 右
垂直top 上 center 中 bottom 下
-像素值 background-position:18px -1px;
-background-attachment:scroll;
background-attachment:scroll;默认根据屏幕滚动
background-attachment:fixed;将背景图固定在某个位置，滑动滚动条图片不动
图片和文字垂直居中（在图片上设置）
verticla-align:middle;
行高 line-height line-height当height与line-height高相等时，一行文字垂直居中
注意事项
写页面写div必写类名，必设置宽高
ul起名字最好也设置好宽高
CSS命名规则
topbar 顶部条
header 头部
content 内容
footer 底部
nav 导航条
menu 菜单
banner 轮播图
logo 图标
search 搜索框
cart 购物车
ad广告
sec秒杀
more 更多、查看更多
scrollTop回到顶部
main页面主体
login登录
loginbar登陆条
regsiter注册
-浮动
浮动-竖着排列的项目想横着排列
float:left float:right
浮动作用
1.将块元素变成行内块，将行元素变成行内块
标准文档流
在不使用其他与排列和定位相关的css规则时，各个元素排列方式
脱离（标准）文档流
1.浮动
2.定位
3.弹性盒子
预防浮动带来问题
设置腹肌，设置好宽高
清除浮动
1.clear:both;
内容--蓝色
边框--黄色
内边距--绿色
外边距--橘色
浮动能解决的问题？
-盒子塌陷
可以把行元素和块元素转化成行内块
盒子模型（标准盒模型）
任何盒子都有 盒子模型
盒子模型由四部分组成：content内容，padding内边距，border边框，margin外边距
作用
-content 内容 盒子宽高
-padding 内边距 盒子与边框的距离
-border 边框 盒子模型
-margin 外边距 盒子与其他的边距
从内而外：content-border-padding-margin
书写
padding 内边距
padding:10px;上下左右为10px
padding:5px 10px;上下5px 左右10px
padding:5px 10px 4px;上5px 左右10px 下4px
padding:5px 10px 4px 1px;上5px 右10px 下2px 左1px
按顺时针 上5px 右10px 下2px 左1px
padding-top;
padding-left;
padding-right;
padding-bottom;
margin 外边距
margin:10px;上下左右为10px
margin:5px 10px;上下5px 左右10px
margin:5px 10px 4px;上5px 左右10px 下4px
margin:5px 10px 4px 1px;上5px 右10px 下2px 左1px
按顺时针 上5px 右10px 下2px 左1px
margin-top;
margin-left;
margin-right;
margin-bottom;
margin:0 auto;让盒子居中auto自动浏览器的宽度减盒子宽度平均除以2，自动计算
border边框
border:1px solid red;
1px是边框粗细值
solid边框线的类型
-dotted点线
-dashed虚线
-double双线
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
面试问题
盒子塌陷
两个块元素上下margin值会重叠，使用margin值大的一个
解决margin他先问题
浮动
盒子模型
分为标准盒模型和怪异盒模型
标准盒模型从内到外：content内容-padding内边距-border边框-margin外边距
怪异盒模型顺序：content包含padding内边距和border边框，外面是margin外边距
css层叠样式表
1.叠加
2.继承
css继承属性
color
font-family
font-style
font-size
font-weight
list-style
vertical-align
css引入方式
1.行内
2.内嵌
3.外链
4.引入
css选择器
标签，类名，id,子代，后代，交叉，群组，通用，伪类
css叠加
哪个最后写就最终应用哪个
有优先级按照优先级顺序，平级就按照最终应用
清除浮动
1.给父级设置宽高加display:block
2.给父级设置宽高加overflow:hidden;（超出隐藏）
3.clear:both;在被受影响的元素加
4.伪类{宽高，display:block;clar:both;overflow:hidden}
:after{}
定位position
1.静态定位static
2.相对定位relative
3.绝对定位absolute
绝对定位的计算：父级宽-子级宽/2
4.固定定位fixed
根据浏览器控制方位
top
left
right
bottom
层级关系
z-index:1（范围0-9999）
层级初始值为0
定位区别
1.占不占原来位置
2.移动式参展哪里
3.是否受父级影响
定位区别
父相子绝
固定定位fixed。不占原来位置，移动时参照浏览器窗口
相对定位relative。占原来位置，移动式参照原来位置
绝对定位absolute。不占原来位置，无父级且父级无定位时移动式参照浏览器边界，有父级且父级有定位时，移动时参照父级边界
标签：text,padding,10px,font,margin,选择器,CSS 来源： https://www.cnblogs.com/xinyuxiangwang/p/16252919.html