css是层叠样式表 （Cascading Style Sheet），又叫级联样式表，简称样式表。
我要评论 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
内容区域
</body>
</html>
结构层 HTML
表示层 CSS
行为层 JS
<p style="color:gold;" >金色字体</p>
<head>
<style>
p{color:red;}
</style>
</head>
<link rel="stylesheet" href=""/>
引入外部的CSS样式，这样用的比较多
4. 导入式
<head>
<style>
@import url(my.css);
</style>
</head>
优先级：行内样式>内部样式>外部样式>导入样式
内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显
div
1. 可定义文档中的分区
2. 可以把文档分割为独立的、不同的部分
3. 是一个块级元素，独占一行
4. 通常与CSS配合
color 定义文本的颜色
如：
div{color:red;}
div{color:#ffffff}
div{color:rgb(255.255.255);}
font-style 设置文本是否倾斜
normal（正常字体） 默认值
italic 斜体
如
p{font-style:italic;} /* 倾斜 */
font-size 设置文本字体的大小
p{font-size:12px;}
通过像素来指定字体的大小
1px=1像素
font-family 定义文本使用某个字体
p{font-family:microsoft YaHei;}
可以设置多个字体，排名越靠前优先级越高
默认值由浏览器决定
p{ font-weight:normal;} /* 默认值 */
p{ font-weight:bold;} /* 粗体 */
p{text-align:left;} /* 左对齐 */
p{text-align:center;} /* 居中 */
p{text-align:right;} /* 右对齐 */
p标签是块级元素，left、center、right会作用于整行
p{text-decoration:underline;} /* 指定文字的修饰线是下划线 */
p{text-decoration:overline;} /* 指定文字的修饰线是上划线 */
p{text-decoration:through;} /* 指定文字的修饰线是贯穿线，类似于删除标签的效果 */
常用text-decoration:none;来去除a标签的下划线
p{text-indent:2em} /* 首行缩进2个文字的大小 */
p{text-indent:-9999em;} /* 用来隐藏文本 */
1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px，
那么，1em的默认大小是16px。
如果子标签是南标签，行高可以撑起子标签的高度
如果子标签是女标签，行高不能撑起子标签的高度
border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称边框三要素。
三要素书写的时候一般如下顺序
border：宽度 样式 颜色;
如
div{border:1px solid red;} /* 1像素红色的实线边框 */
div{border:1px dotted red;} /* 1像素红色的点状边框 */
div{border:1px dashed red;} /* 1像素红色的虚线边框 */
div{border:3px double red;} /* 红色的双线边框最小3像素不然显示不下 */
border的三要素可以统一写在"border"属性中，也可以单独设置
border-width: ;
border-style: ;
border-color: ;
在style属性为空的情况下，整个边框是不会出现的，不写width会有默认3像的值，不写颜色会默认为黑色。
margin 外边距
margin是围绕在元素边框周围的空白区域，会在元素外创建额外的空白区域，外边距是透明的
单边设置：
margin-top/right/bottom/left:value;
value可取值为像素、%、auto、负值
外边框简写：
margin:value(四个方向相同);
margin:value(上下) value(左右)；
margin:value(上) value(左右) value(下);
margin:value(上) value(右) value(下) value(左)
padding 内边距
内容区域和边框之间的空间，会扩大元素边框所占用的区域
语法： padding:value;
单边设置：
padding-top/right/bottom/left:value;
value可取值为像素，百分比，但不能为负数
padding的简写：
> padding:value(四个方向相同);
> padding:value(上下) value(左右);
> padding:value(上) value(左右) value(下);
> padding:value(上) value(右) value(下) value(左);
内容区域 width和 height
对于男盒子来说，表示内容区域
对于女盒子来说，width和height不起作用
> 注意点
1）不设有默认值，宽度默认值是auto，对于块级元素来说auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
2）如果不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说也是由内容撑起来的，但是和font-size也有关系。
3）宽度和高度可以设置百分比，是占父元素的百分比，一般情况下在移动开发时用的多一点。
background 背景
1.background-color：设置盒子的背景颜色 ，背景色可以填充padding，也可以填充margin
2.background-image：设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片
一个盒子大小正好和背景图大小一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分背景图的左上角和盒子的左上角对齐，左上角是指从padding开始，但是border中也会填充背景图片
3.background-repeat：控制是否平铺
repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat 不平铺
3.一个盒子中放一个大的或小的背景图，可以使用background-position进行定位
浮动的初衷：为了实现新闻的自围效果
浮动的元素半脱离标准文档流：
出国了
浮动刚开始是为了实现自围效果，文字并不会钻到浮动的元素后面，文字会环绕浮动的元素分布，就叫自围效果。
现在我们基本上利用浮动并不是为了实现自围效果， 我们主要使用浮动来让块级元素并排显示。
浮动元素的特点：
1.贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧地贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2.包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3.一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下它的高度会变成0，也就是说父元素的高度塌陷了。
4. 如果一个女盒子浮动了，就可以设置宽度和高度，女盒子就变成了男盒子。
元素浮动会造成影响：
1.对父元素造成影响
2.对后面的兄弟元素造成影响
我们需要清除浮动所造成的影响，也叫清除浮动：
清除对父元素造成的影响
1.overflow:hidden
2.加高法
元素浮动也会对他后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成自围效果。对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。
最专业的：clear:left/right/both clear:both
clear:both只能写在第一个受影响的元素上，写在父元素上没效果
注意：
DIV中浮动的元素脱离不了父元素，可以影响父元素的高度，会跑到别的盒子中
如果一个盒子浮动，另一个不浮动或者定位（完全脱离标准文档流）可以让两个盒子重叠到一起
两个浮动的元素不能重叠到一起
浮动的元素都实现向上浮动到父盒子的边界
块级元素
div、p、h等
特点：
1.独占一行
2.默认宽度和父元素一样宽
3.css设定的宽高有效
行内元素
span、a、em、strong等
特点：
1.不会独占一行
2.宽度由内容决定
3.在css中设置宽度不起作用
行内块元素
img标签等
特点：
1.不会独占一行
2.可以设置宽高且有效
元素的模式转换
display:block;
把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙
display:inline;
把某个元素的显示模式修改为行内元素
**display:inline-block;
把某个元素的显示模式修改为行内块模式
元素的显示和隐藏
display:none; 没有显示模式，既看不见也不占据位置
visibility:hidden; 隐藏，虽然看不见，但是占据位置
visibility:visible; 可见（visibility的默认值）
相对定位 position:relative;
特点
（1）没有脱离标准流，还是会占据在标准流中的位置
（2）没有改变显示模式
（3）定位基准是他自己原来的位置
绝对定位 position:absolute;
特点
（1）脱离标准流，不占据原来的位置
（2）改变了元素的显示模式
（3）定位的基准是：
目的
提高页面的加载速度，减少服务器的压力
制作
（1）一定要是小图片（最好是不太会发生变化）
（2）精灵图在制作的时候宽度一定要大于最大的那张图片的宽度
（3）图片与图片之间必须要有空隙
（4）在精灵图制作完成之后一定要将精灵图下方留出足够的位置，方便将来进行扩展
本文地址：https://blog.csdn.net/weixin_46628546/article/details/107281703
如对本文有疑问， 点击进行留言回复！！
南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)
让盒子水平居中解决方法！！！---（块元素，行内元素，行内块，文本）
CSS踩坑-------transform:scale(‘数字’)
网友评论