标签：hid indent overflow 文件 浏览器 inter 颜色 代码冗余 通配符选择器
<!--引入css-->
1.行间样式
<div style=" "></div>
2.页面级css
<style type="text/css"></style>
3.外部css文件
首先建立一个css文件
然后在HTML文件里建立一个<link rel="stylesheet" type="text/css" href="">
<!--选择器-->
1.id 一一对应
在HTML里<div id="only">123</div>
在CSS里#only{ }
2.class 多对多
在HTML里<dic class="demo demo1">123</div>
在css里.demo{ }
.demo1{ ]
3.标签选择器
在HTML里<div>123</div>
在css里直接div{ }
4.通配符选择器
在HTML里<span></span>（行级元素）
<div></div>
<strong></strong>
在css里*{ } 选择所有标签 （适合初始化）
5.属性选择器
在HTML里<div id="only" class="demo">123</div>
在css里[id/id="on;y"]{ }
6.父子选择器/派生选择器 不在乎标签只在乎关系
在HTML里<div>
<span>
</span>
</div>
<span>
</span>
在css里
div span{ }
7.直接子元素选择器
在HTML里<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
</div>
在css里div > em { } 这时候直接选择子元素1
8.并列选择器
在HTML里<div>1</div>
<div class="demo">2</div>
<p class="demo">3</div>
在css里div.demo{ }
9.分组选择器
当css里代码冗余度太高时可以em,strong,span{ }一次性写出
当出现优先级问题时：行间样式>id>class=属性选择器>标签选择器>通配符选择器
当出现!important时优先级最高
css权重
!important Infinity--正无穷
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
256进制
1 0 0 0
1 0 0
1 0
1
**浏览器判断自右向左以最快的方式判断标签
**判断权重：只要是写在同一行时就把权重值相加再进行比较
**如果权重相同后来的代码会覆盖原来的代码叫做后来先到
css
单位：
绝对单位
cm ...
相对单位
px（像素）
em（1em=1font-size=16px）
格式：div{ 属性名 ：属性值；}
属性名
font-size 字体大小(高) 默认的浏览器字体是16px
font-weight:bold; 加粗
font-style:italic; 斜体
font-family：arial; 字体(默认arial字体)
opacity(透明度):0.5;
字体颜色
1.土鳖式（纯英文单词）
color:green;
2.颜色代码
举个栗子 color:#ff4400（淘宝红）**transparent（透明色）
每两位代表一个颜色
**如果每两位重复可以简写成三位
r g b
00-ff 00-ff 00-ff 16位进制数
3.颜色函数
举个栗子 color:rgb(0,0,0);十进制
盒子
border:1px（粗细）solid（展示形式）black（颜色）;
border-style:dotted;（点状虚线）dashed（条状虚线）
border-left-color
border-top-color
border-right-color
border-radius:10px;圆角
text -align:left; 对齐方式 center（居中）
line-height:0px; 单行文本高度
text-indent:2em; 守首行缩进
text-decoration（装饰）:line-through;（中画线）none（没有线）underline（下划线）overline（上划线）
cursor （光标定位置）：pointer（变成小手）；help（变成小问号；
margin（元素之间的空隙）-left:;
伪类选择器
在HTML里<a href="www.baidu.com"></a>
在css里a:hover{ background-color:orange;}
三大模型
no.1盒子模型
盒子四大部分：
边框 border
外边距 margin
内边距 padding
盒子内容 content (width + heigth);
body有一个天生的margin是8px
no.2层模型
position:absolute;绝对定位（脱离原来位置定位）
left/（right）：
top/（bottom）:
**相对于最近的有定位的父级进行定位，如果没有这样最近的父级那么相对于文档进行定位
position:relative;相对定位（保留原来位置进行定位）
**相对于原来的位置进行定位
**一般用relative做参照物，用absoluye进行定位
position:fixed;固定定位
left/（right）：
top/（bottom）:
z-index:1;(设置层面)（数值越大越靠近你）
居中固定写法
position:absolute;
left:50%
top:50%
width:100px;
height:100px
margin-left:-50px;
margin-top:-50px
来自margin的bug
垂直方向的margin会粘合到一起取最大值（margin塌陷）
解决方法NO.1
给父级加一个顶棚border-top;1px solid red;
解决方法NO.2
bfc---block format context 块级格式化上下文
触发规则：position:absolute;（绝对定位）
dispaly:inline-block;（同行）
float:left/right;（左右浮动）
overflow:hidden;(溢出盒子的部分隐藏展示)
**使用时要适当否则会出现新的问题
兄弟级垂直方向的margin是合并的 （margin合并）
解决方法
增加一个父级，，在用bfc解决**但是最重要的一点是在css设计里不能因为改bug随随便便加结构，所以我们的解决办法就是不解决我们选择改像素来弥补
no.3浮动模型
float:left/right;
1.浮动元素产生了浮动流
所有产生浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
clear(用来清除浮动流):both;**必须是块级元素才可以使用clear清楚浮动 display:block;
三件套 content:"";
display:block;
clear:both;
margin:0（上下） auto（自适应）;可以解决导航栏问题
伪元素
天生就存在
天生就为行级元素
具有元素特性不具有元素结构
在HTML里随便建立两个标签<span></span>
在css里
span::befor{ conten:"" }选中标签前端的伪元素
span::after{ }选中标签后端的伪元素
**可以用伪元素清楚浮动
**凡是设置了position:abolute; float:left/right;系统会打内部把元素转换成inline-block;
溢出容器，要打点展示
1.单行文本
三件套
white-space:nowrap;（失去换行功能）
overflow;hidden;(部分展示其余隐藏)
text-overflow:ellipsis;（打点）
2.多行文本
overflow;hidden;(只做截断)
背景图片
background-image:ul(背景图片地址);
background-size：200px(宽) 100px（高）；（设置背景图片大小）
background-repeat:repeat/no-repeat/repeat-x/repeat-y;(重复出现)
background-position: center center;（50% 50%相当于center center）
用图片代替文字
方法1：
首先让首行缩进超出文本框
text-indent:190px;
让他失去换行功能
white-space:nowrap;
在让其部分隐藏
overflow:hidden;
方法2:
把背景颜色加载到padding上（padding不能加载内容）
把高度去掉用padding把容器撑开
padding-top:90px;
在让其部分隐藏
overflow:hidden;
**行级元素只能嵌套行级元素
**块级元素能嵌套任何元素
**规定
<p></p>标签里不能套块级元素例如<div>
<a>标签里不能嵌套<a>标签
**position:absolute; float:left/right;设置其中的一种display会自动转换成display:inline-block;
**一但行级块元素内有文本后面跟的文字就会变成和文本对齐，如果行级块元素内文字过大依然会出现和大文字底对齐
vertical-align:2px/middle）（中对齐）;（可以改变文字的对齐线）
标签：hid indent overflow 文件 浏览器 inter 颜色 代码冗余 通配符选择器
原文地址：https://www.cnblogs.com/skr-j/p/10303308.html
