CSS总结

一.前言

最近在学习html和css的一些基本应用，遇到过很多问题，刚开始会发现css像是不可控一样，这次达到了预期效果，可能下一次就偏了十万八千里，或者是“牵一发而动全身”。其实对于计算机而言，没有什么是不确定的，如果有，那一定是学艺不精。以下是自己在学习过程中对css的一些总结。

二.css基本属性

css,（Cascading Style Sheet层叠样式表 ） ，学习CSS就是学习一堆选择器和属性的选择和使用。我们常用css来进行布局的构造和整体美化。

1. 布局：盒子模型设置、浮动设置、定位设置。
2. 美化：字体设置、文本设置、列表设置、表格设置。

字体设置：

• font-style:设置字体是否倾斜 normal italic
• em: font-style:normal 用的不多
• font-weight:设置字体是否加粗 normal bold bolder 100 200 300
• h1: font-weight:normal
• span: font-weight:bold 用的比较多的
• font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px 可以非常大 不能非常小 最小是12px
• font-family: 设置字体类型 和用户电脑上设置的字体也有关系 ,font-family:A,B,C,D
• font:上面的几个属性的复合属性 font:font-style font-weight font-size/line-height font-family
  font-style font-weight 可以不写 也可以交换位置
  font-size/line-height font-family 必须写 能交换位置
• 需要注意
  • 有继承性：给父元素设置了，子元素也可以继承到
  • 经典应用：给body设置字体相关的属性。
  • color:设置字体颜色
  • 对于a标签来说，需要选中a标签 。

  ---

文本设置：

• text-decoration: 用来设置文本的装饰线 下划线 删除线
  • underline 下划线 应用：把a标签的默认的下划线去掉 hover时，加上下划线 line-through 删除线 偶尔用一下
• text-indent: 首行空两格
  • text-indent="2em"空两个汉字的宽度
  • text-indent=" -1000em" 把隐藏一个盒子中的文本
• text-align:
  • 让盒子中的文本居中
  • 让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）
• line-height:设置行高
  • 如果是子标签是男标签，行高可以撑起子标签的高度
  • 如果是子标签是女标签，行高不能撑起子标签的高度
  • <div style="height: 100px; line-height: 100px;"><a href="">行高等于盒子高度</a></div>

三.常见问题总结

1.text-align和margin:0 auto

在需要对盒子内元素进行居中时，我们常会用到两个属性

text:align="center";

        <!-- 让行内元素直接居中 -->
        <!-- <img src="./baidu-s.gif" alt=""> -->
        <!-- <input type="text"> -->
        <!-- <span>span</span> -->
        <!-- <strong>strong</strong> -->
    
        <!-- 让a盒子中的内容水平居中的 -->
        <!-- <a href="" style="border: 1px solid red; text-align: center;">a标签中的内容</a> -->
        <!-- 让a标签直接居中的 -->
        <!-- <a href="" style="border: 1px solid red; ">a标签中的内容</a> -->
    
        <!-- 让会计元素的文本在盒子中的居中 -->
        <!-- <div>div</div> -->

margin:0 auto;

在介绍margin:0 auto之前，先要讲一下什么是盒子模型，盒子模型是说HTML中的每个元素都是被包裹在一个盒子里面的，盒子主要分为四个部分，一个是content（盒子内的区域），一个是border（盒子边框），在content和border之间的是padding（内填充区域），以及与父元素之间的距离即在border之外的margin（外填充区域）。因此居中对齐是使整体盒子在其父元素中居中margin:0 auto，意思是距父容器顶部距离为0px，而左右下三部分自动调整。而padding是对内的，padding的调整对盒子在整个页面中的位置根本不能起任何作用。当使用margin:0 auto无法达到居中效果是可能是没有设置盒子的width。

2.父子元素之间的重叠问题

父子元素之间的重叠问题:

     <style>
       .box9{ 
        background-color: pink;
        margin-top: 50px;
    }
    .box9 .box10{
        background-color: gold;
        margin-top: 30px;
    }
     </style>
   
    <div class="box9">
        <p class="box10">我是一个段落</p>
    </div>    
    

按理说p标签上面的应该有80px的margin ，实现是：只有50px margin 这种现象叫父子元素之间的margin重叠

解决：
1）给父元素加border
2）给父元素加padding 只加一个0px不行

     <style>
       .box9{ 
        background-color: pink;
        margin-top: 50px;
        padding:1px;
    }
    .box9 .box10{
        background-color: gold;
        margin-top: 30px;
    }
     </style>
   
    <div class="box9">
        <p class="box10">我是一个段落</p>
    </div>    
    

3.浮动问题

浮动元素的特点：

1. 浮动是半脱离标准文档流。
2. 贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
3. 包裹性 如果是一个块级元素，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小。
4. 一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
5. 如果一个行内元素浮动了，就可以设置宽度和高度，也就是变成了块级元素。

元素浮动会造成影响：

1. 对父元素造成的影响 对后面的兄弟元素影响

我们需要清除浮动所造成的的影响，也叫清除浮动：

1. 清除对父元素所造成影响
   1. 加高法
   2. overflow:hidden

元素浮动也会对它后面的元素造成影响：
后面的元素会钻上去，但是文字不会，文字会形成字围效果。 对兄弟元素造成影响，我们需要清除这种影响，也叫清除浮动。clear: left/right/both clear:both

注意：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。

---

后续有问题再进行补充

本文地址：https://blog.csdn.net/QIu_zero/article/details/107279510