css2zj

标签分类

1. 男标签（块标签）：独占一行，eg:div hn p ul ol li dt…
   可以设置宽高，如果不设，则默认为父元素的100%；
2. 女标签（行内元素）：并排显示，eg:span em b i…
   不能设置宽高，且垂直方向的值不起作用；
3. 人妖标签（行内块元素）：可以并排显示，其余和男标签一样，eg:input img;

标签相关知识

1. 男女性别互换:
   变成女：display:inline;
   变成男：display:block;
   变成人妖：display；inline-block;
2. 让男标签并排显示的方法：
   浮动
   flex 布局
   层布局

font相关属性

1. font-family:设置字体，默认为宋体，后面可加多个属性值，电脑会以最先出现的字体显示；
2. font-weight:设置字体是否加粗，blod为加粗，nomal为正常；
3. font-size:设置字体的大小，谷歌浏览器默认字体为16px;
4. font-style:设置字体是否倾斜；
5. font:14px/28px:表示字体大小为14px，行高为28px;
6. font:14px/2:与上述相同

文本修饰线

1. text-decoration:underline>下划线
2. text-decoration:overline>上划线
3. text-decoration:linethrough>删除线
4. text-decoration；none>取消下划线

列表相关设置

1. list-style-type:none;去掉列表前的小圆点或者数字。
2. 有序列表可设置type=“i”,表示后面的li以i开头,依次i,ii,iii,iiii…
   同理可以设置其他的type类型。

padding margin

1. padding:10px;表示上下左右的内边距都为10px;
2. padding:10px 0;表示上下为10px,左右为0px;
3. padding:10px 20px 30px;表示上为10，左右为20px,下为30px;
4. padding:10px 20px 30px 10px;分别表示上右下左四个方位；
5. margin与上面相同。

css中重叠性

1. id>class>标签
2. 行内>内部>外部（就近原则）
3. 自己写的>继承的
4. id=100 class=10 div=1
   相加，谁大选谁

居中方案

1. text-align=center;让一个盒子中的文字或图片居中
   (不过此方案在特定的情况下也可以让盒子直接居中，即可以让一个盒子里面的女标签或者人妖标签直接居中)
2. margin=0 auto;让一个盒子居中
3. 设一个盒子设置了行高，其子标签如果是男标签，则高度可以被撑起来，然后居中；如果不是男标签，他高度不会被撑起来，但是会继承父元素的行高，所以仍会居中。

清除浮动影响

对于父元素而言
   会使父元素的高度塌陷，清除浮动影响方法如下：

1. 使用overflow:hidden
   （overflow:hidden的本意是隐藏多余部分）
2. 手动加高

对于兄弟元素而言
    元素浮动会使雄蝶元素后面的元素钻上去，但文字不会，所以会造成字围效果，可以使用clear:both；将这个属性放在的第一个受影响的兄弟元素上面。

background相关知识

1. 为背景插入图片：background:url();
2. 设置背景是否平铺：background-repeat;
   取值为x-repeat表示在X轴方向平铺；
   取值为Y-repeat表示在Y轴方向平铺；
   取值为no-repeat表示不平铺；
3. 设置背景大小：background-size；
   取值为over表示让图片充满盒子，解决了装不下的问题；
4. 设置背景图片的位置：background-position;
   取值有两种形式：根据图片的坐标eg:20px -30px（针对大图）;可设置left center（尺寸与背景相符）；

一些布局小方法

1.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aKgCaGom-1594384409925)(./QQ图片20200710191132.jpg)]

1. 设插入图片的部分为ul,每个图片及下面的内容用li包起来。
2. 设置ul的宽度。
3. 设值每个li的宽度（此图为ul的宽度/5）。
4. 对于li之间的空隙，可以在li里面设置padding(eg:paddding:10px 0 0 10px)。

2.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wkehp93Y-1594384409930)(./QQ图片20200710191138.jpg)]

1. 将其设置成一个大的ul,设置宽度;
2. 每行内容用li包裹；
3. 可以将“电子邮件”“创建密码”一直到“立即注册”那个按妞的前面用一个label包裹，方便统一设置，设label的class为lb;
4. 为.lb设置宽度，然后text-align=right将文本右靠齐，这样可以达到图中对齐的效果；
5. 最后再为input设置一个margin：10px，使整个布局更美观。

3.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8YOLdE2-1594384409933)(./QQ图片20200710191124.jpg)]

1. 将其设置成一个大的ul,设置宽度;
2. 文字和图片用li包裹；
   li的宽度设置为ul/9;
3. 让li左浮动；
4. 文字前插入图片的方式：
   文字设为a标签，为a标签加背景，使用检查的方式进行图片位置调试；
5. 将a标签设置一个padding-left,使其更美观。（此方法适用于图片较小的）
   对于大的背景图，我们需要在a标签前面再设置一个盒子，设置合适的宽高，再在这个盒子里面插入图片，进行调试。

签设置一个padding-left,使其更美观。（此方法适用于图片较小的）
对于大的背景图，我们需要在a标签前面再设置一个盒子，设置合适的宽高，再在这个盒子里面插入图片，进行调试。

本文地址：https://blog.csdn.net/ys_dd/article/details/107266725