目录
CSS基础性质
CSS盒子模型
边框（border）
Border-width（px）
Border-color
Border-style
边框的样式的属性值：
none无边框
hidden隐藏边框
dotted在某些平台为点线，其他为实线
dashed在某些平台为虚线，其他为实线
solid实线边框
double双线边框
groove根据颜色的值凸显3D凹槽效果
ridge根据颜色的值凸显菱边边框效果
inset根据颜色的值凸显3D凹边效果
outset根据颜色的值凸显3D凸边效果
复合写法：
border：1px solid red;没有顺序,还可以边框分开写
特殊（边框贴贴）
border-collapse属性控制浏览器绘制表格边框的方式。
border-collapse：collapse；
边框会影响盒子的大小。
内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
Padding-top/...（上下左右；上下，左右；上，左右，下；上右下左）
外边距（margin）
Marg-top/...
外边距可以让块级盒子水平居中,但是必须满足两个条件：
- 盒子必须制定了宽度。
- 盒子左右的外边距都设置为auto。margin：0 auto；
直接给其父亲标签添加text-align：center；
外边距合并
嵌套块元素垂直外边距的塌陷.
会选择更多的margin进行移动。看起来就跟塌陷一样。
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义内边框。
- 可以为父元素添加overflow：hidden；
清除内外边距
*{margin：0；padding：0；}
注意：
行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距。
元素的显示与隐藏
Display
display：none(block)；隐藏对象,不再占有原来的位置。
Visibility
visibility：visible；元素可视
visibility：hidden；隐藏起来但是位置保留！！！！！
Overflow
就是对于我们溢出部分的处理，是隐藏还是显示。
Overflow:visible,hidden,scroll(显示滚动条来隐藏),auto（需要的时候展示滚动条）;----内容短，不展示滚动条，内容长，展示滚动条，可以拉动滚动条观看内容。
CSS元素显示模式
元素（标签）以什么方式进行显示。
两大元素
块元素
<h1><p><div><ul><ol><li>,其中<div>是最典型的块元素。
特点：
- 比较霸道，自己独占一行。
- 可设置宽度高度内外边距。
- 宽度默认父级100%。
- 是个容器，可以放任何元素。
注意事项：
文字元素不允许放块元素，比如<h1>,<p>,这些都是拿来放文本的。
行元素
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，<span>是最典型的行元素。行元素又可以叫内联元素。
特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高度，宽度设置无效。
- 默认宽度是内容本身的宽度。
- 行内元素只能容纳文本或者其他行内元素。
注意事项：
链接里面不能放链接！！特殊情况，<a>里面可以放块元素。
行内块元素
行内标签有几个特殊的标签<img/> <input/> <td>,他们同时具有行内元素和块元素的特点，有些资料称他们为行内块元素。
特点：
- 一行显示多个，和相邻的行内或行内块之间有空白间隙。
- 默认宽度是内容本身的宽度。
- 可以设置高度宽度内外边距。
CSS元素显示模式转换
一个模式的元素需要另外一种模式的特性。
例子：想要增加链接<a>的触发范围。
a{w200px,h200px;bc-color:pink;display:block;}
语法：
转为块元素：display：block；行内元素：display：inline;行内块：display:inline-block;
Tips:让行高等于格子的高度。
CSS的背景
背景图片
装饰性图片或者超大的logo可以用background-image属性描述。
Background-image（none|URL（地址））
背景平铺background-repeat属性。
属性值：
repeat，no-repeat，repeat-x，repeat-y；
特点：
默认的情况下，会把背景图片进行平铺。
背景图片会压着背景颜色。
背景颜色和图片可以同时设置。
背景位置background-position
属性值：
length：百分数，由浮点数和单位标识符组成的长度值。
特点：
x表示到左侧的距离，y表示到上侧的距离。
position：top，center，bottom，left，right方位名词。
（若只写了一个参数，另外一个参数，默认居中。）
单位可以混合！但是第一个一定是x坐标，第二个必然是y坐标。
语法：background-position： x y;
背景图像固定background-attachment
（背景附着）这个属性设置背景图片是否固定或者随着页面进行滚动。
属性值
Scroll随对象内容滚动
fixed背景图像固定
半透明背景
background：rgba(0,0,0,0.3);
0就是百分百透明，1就是不透明。
复合写法
body { background: black url(images/bg.jpg) no-repeat fixed center top; }
CSS基础选择器
基础选择器
标签选择器
p{ color: green; }
类选择器
·类名 {属性1： 属性值1}
<div class=’red’>变红色</div>
注意：
不要使用纯数字，中文命名，间隔可以用“-”代替。
类选择器-多类名
<div class=”red blue”>ou~</div>
ID选择器
#id { 属性1： 属性值1； 。。。 }
通配符选择器
* { margin:0; padding:0; }
复合选择器
后代选择器
.nav li { color: yellow; }
子选择器
.nav>a{ color: yellow; }
并集选择器
div,
p,
ol li { colo
伪类选择器
/* 未访问过的链接 */ a:link { color: black; text-decoration: none; }
/* 已经访问过的链接 */ a:visited { color: chartreuse; }
/* 鼠标经过链接 */ a:hover { color: blue; }
/* 鼠标按下链接但未弹起 */ a:active { color: red; }
顺序不能边，LVHA
focus伪类选择器
用于选取获得焦点的表单元素，焦点就是光标，一般情况下<input>表单才可获取，所以这个针对表单。
CSS字体属性
CSS Fonts属性
什么字体
font-family：‘宋体’；
font-family：‘微软雅黑’；
字体大小
font-size：20px（20像素的意思，px是单位）
字体粗细
font-weight：700；
文字样式
font-style：normal/italic,平常或者斜体。
CSS复合属性
font： italic 700 16px '微软雅黑';
CSS文本属性
文本颜色
color定义文本颜色
对齐文本
text-align:center;
装饰文本
text-decoration属性规定添加到文本的修饰。
- none.默认。没有装饰。
- underline.下划线
- overline.上划线
- line-throgh.删除线
-------------------------------------------------------------------------
文本缩进
text-indent:20px;
2em就是两个当前元素文字大小
行间距
line-height: 26px;
CSS三大属性
层叠性
Div{color:red}div{color:pink}
如果冲突，就近原则。会覆盖之前的。最后是粉色。
继承性
子标签会继承某些 父标签的属性。
font：12px/1.5 .这个1.5就是当前文字大小的1.5倍。
优先性
- 选择器相同，则执行层叠性。
- 选择器不同，根据选择器权重执行。
从小到大：
继承<元素选择器<类选择器<ID选择器<行内样式<！Important
越精确，优先级越高,但是父亲那里继承的只算在父亲那一层。.
例子：
#fa{
color:red!important;
}
p{
color:pink;
}
<div id=“father”>
<p>good</p>
</div>
//最后p是粉色，因为important的对象是父亲的。
权重叠加
Ul li{color：green}权重叠加：标签+标签。
CSS引入方式
内部样式表（嵌入式引用）
<style> div { color: red; } .becomered { color: red; } </style>
行内样式表
<div style="color: red; font-size: 12px;"> 青春不常在 </div>
外部样式表
<link rel="stylesheet" href="css文件路径">
关于HTML的一些知识总结在这篇文章：前端HTML等学习笔记，复习，以及自己的理解_minmin66666的博客-CSDN博客
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
