CSS入门2浏览器、各种文本属性、伪类选择器、定位、浮动、伪元素////////////////////////

浏览器和内核

一些与开发没关系但是与素养有关系的知识，面试中可能会考：
浏览器主要由SHELL和内核组成。

shell就是浏览器的用户界面。
浏览器内核，即浏览器的渲染引擎和JS引擎，是浏览器的核心部分。渲染rendering引擎主要用于获取网页结构、添加CSS样式、计算网页结构等；JS引擎用于解析JavaScript语言，为网页添加动态效果。我们常见的国产浏览器往往没有自己的内核。下面是几个大厂浏览器与内核的对应关系：

浏览器	内核
chrome	webkit/blink
safari	webkit
firefox	trident
opera	presto

属性

文本

px像素：是一种表示大小的单位，是相对于显示器屏幕分辨率而言的。
em：也是一种表示大小的单位，是相对于字符大小而言的，1em＝1个字符。一般浏览器默认字符大小是16px。
color颜色：可以使用规定好的颜色，也可以使用rgb和hex自定义，原理是光学三原色的组合，透明色是transparent
background-color：背景颜色
opacity透明度：取值0-1之间，文本颜色透明度text-opacity，整体透明度opacity
width宽度
height高度
min-width最小宽度：可以覆盖width。若窗口小于该数值，则出现滚动条
max-width最大宽度
line-height行高：默认22，可以自行设置别的数值
text-indent：文本缩进，常用在登录框账号密码前设置图标。
overflow：溢出，文本溢出文本框时有效，可以设置hidden隐藏、scroll滚动条、auto自动
text-align文本对齐方式：有center，right，justify，必须是在一个容器内部
vertical-align垂直对齐：垂直对齐方式，有top，middle，或是具体像素值，用于解决行内块元素文本对齐问题
text-decoration文本装饰：设置或删除文本的装饰，比如overline，line-through，underline，none
cursor光标：pointer是小手势，not-allowed是禁用
font-famliy字体：可以同时设置几种字体用逗号分隔，如果浏览器不支持第一种字体，就会尝试下一种字体，如果字体名称是中文或者中间有空格，需要加引号
font-size字体大小：一般指字体高度，单位有px，em
font-style字体样式：有normal正常，italic斜体，oblique强制斜体
font-weight字体粗细：可以设置数值，也可以设置normal正常，lighter细体，bold粗体
em与strong：em是语义强调，只不过默认格式是加粗，也可以改成normal；strong是格式加粗
border边框：属性有宽度width，风格style，颜色color，也可以分别设置上下左右边框
border-width：边框宽度，如果是一个值就是上下左右，两个值就是上下和左右，三个值就是上左右下，四个值就是上右下左
多行文本垂直居中的方法：将容器的display设置成table；将容器内文本的display设置成table-cell(表格单元格属性)；将容器内文本的vertical-align设置成middle
单行文本截断和显示省略号的三大件：

        div{
            width: 200px;
            height: 22px;
            border: 1px solid #000;
            white-space: nowrap; /* 不换行 */
            overflow-x: hidden; /* 隐藏x轴溢出的部分 */
            text-overflow: ellipsis; /* 隐藏部分加省略号 */
        }
        
    
    <p>单行文本截断和显示省略号的三大件</p>
    <div>
        <span>
            现在是九月十一号，离国庆假期还有二十天
        </span>
    </div>

文本相关属性还有很多，这里贴一个菜鸟教程的汇总

display布局

元素有三种布局，分别是独占一行的块级元素block、不会独占一行的内联元素inline和兼具二者特点的inline-block元素

inline：内联元素，也称为行内元素，不会独占一行，多个元素会排成一行，无法设置宽高，比如span a标签
block：块元素，独占一行，不同块元素之间有换行，可以设置宽高比如div p h标签
inline-block：可以挤在一起，也可以设置宽高
none：隐藏元素，元素将完全隐藏，不会显示，与visibility: hidden不同的是，none会把这段空间都隐藏

举个栗子，我们想要用a标签做出类似按钮的效果，点击跳转，应该怎样做呢？

a{
            display: inline-block; /* 设置格式 */
            width: 200px;
            height: 40px;
            color: #000;
            line-height: 40px; /* 设置单行文本行高与容器高相同，使文本居中 */
            text-align: center; /* 设置左右居中 */
            text-decoration: none; /* 删掉a标签默认的下划线*/
            background-color: aquamarine;
            border-width: 1px;
            border-style: solid;
        }
        
<a href="https://www.baidu.com" class="link-btn" target="_blank">百度一下，你就不知道了</a>

伪类选择器

参考文献：前端 - 提升你的CSS技能：深入理解伪类选择器和伪元素选择器！ - 云端源想 - SegmentFault 思否

选择器:伪类类型{
    描述;
}

伪类选择器是一种特殊的选择器，用来选择处于特定状态的元素，比如悬停、点击、被禁用之类的，可以使页面有灵活的效果。下面来介绍几种常见的伪类选择器：

动态伪类

用于描述用户与元素的交互状态

:link：当元素是一个链接时
:hover：当鼠标悬停在元素上的样式
:active：当元素被用户激活(点击)时的样式
:focus：当元素获得焦点(如输入框被点击时)
:visited：用于设置已访问链接的样式，与link一起使用来区分未访问和已访问的链接

ui伪类

用于描述元素在用户界面中的状态

:enabled和:disabled：用于表单元素，表示元素是否可用，比如按钮
:checked：用于单选框或复选框，表示元素是否被选中
示例：将选中的单选框的背景色改为黄色

input[type="radio"]:checked {
  background-color: yellow;
}

:nth-child(n)：选取父元素中第n个子元素
示例：将列表中的奇数位置的项目的背景色改为蓝色

li:nth-child(odd) {
  background-color: blue;
}

结构伪类

用于选择父类元素中的第几个元素，使用频率不高，了解即可

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第n个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

盒子模型

盒子模型，也就是Box Model，是css中非常重要的一部分。本质是把html元素看成一个盒子，有四个主要部分

宽高所划分的区域：也就是盒子中内容的宽高
边框border：围绕在内边框和内容外的边框
内边距padding：清除内容周围的区域，是透明的
外边距margin：清除边框外的区域，是透明的，浏览器的body会默认几个像素

内外边距都可以分别设置上下左右的宽度，顺序是顺时针；也可以分开写单独设置四周的距离

需要注意的是，内边距和边框是不占据盒子的宽高的，也就是内边距和边框只会在内容外部扩展。如果要把边框和内边距都收到盒子内部去，就要设置box-sizing: border-box，这样可以准确设置外层盒子和宽高，有利于布局

    <style>
        .outer-box{
            width: 200px;
            height: 200px;
            border: 10px solid green;
            padding: 50px;
            margin: 50px;
        }

        .outer-box .inner-box{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
    
    <div class="outer-box">
        <div class="inner-box"></div>
    </div>

上面的代码的实际效果如图：

可以看到，内部盒子不是居中的，原因是外部盒子的宽高大于内部盒子的宽高，因此只能在左上角，那么我们如何改变呢？可以将内部盒子的宽高设为100%，也就是继承外部盒子的宽高这样就能占满外部盒子除内边距外的内部空间。
margin是一个很重要的参数，但是我们在嵌套的时候，可能会遇到一个问题：设置内部小盒子的margin，会使外部大盒子的margin同步设置，使两个盒子同时移动，也就是margin塌陷。

定位

定位也是css中很核心的内容，相当于新建一个图层，定位的元素在新图层上，分为绝对定位absolute和相对定位relative。
有三参数需要设置，分别是positio，和两个定位：left或right选其一设置参数，top或bottom选其一设置参数。
需要注意的是，这个绝对定位是相对于最近的有定位的父元素的定位，如果都父元素没有定位，就相对于html文档进行定位。我们一般把父类设为相对定位，子类设为绝对定位。
如果有两个元素一个absolute一个默认。如果absolute元素在上面，则开辟新图层后两个元素分别占据两个完全相同的页面位置，表现出来就是两个元素会出现重叠，absolute元素会覆盖住默认元素（如果默认元素是relative元素，则relative会覆盖住absolute元素）；如果absolute元素在下面，则会在上面元素剩余的空间开辟新图层，表现为两个元素上下排列，不重叠。
css中，如果两个元素需要占据相同的位置，在默认的情况下，后出现元素会覆盖掉前面出现的元素（这不就是裁员招聘吗。。）。另外还有一个参数可以决定这种顺序，就是index-z，数值越大，优先级越靠前，两个元素出现重叠的时候会覆盖住相同位置的其他元素。

两栏

两栏是非常常见的一个样式，很多网站都是用这种样式，左边导航栏宽度不变，右侧内容根据窗口大小自适应。那么这种样式要如何实现呢？代码如下，是需要我们背下来的

        html,body{
            height: 100%;
            margin: 0;
            overflow-y: hidden;
            /* 这样设置就可以占满整个页面 */
        }
        .left{
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 100%;
            background-color: green;
        }
        .right{
            height: 100%;
            margin-left: 300px;
            background-color: orange;
        }

如果想让右边栏不动，左边栏自适应的话，只需要改一下相对应的参数就可以了

浮动

folat，可以设置为left或者right，指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它，主要用来制作图片被文本环绕的效果。内联、内联快、浮动、溢出隐藏、纯文本都可以识别浮动元素的位置；但是块级元素无法识别浮动流元素的位置。如果把几个相邻的元素放到一起，如果有空间的话，他们会相邻。
清除浮动：如果想要元素强制移动到浮动元素下方，就需要清除浮动，也就是clear，添加一个属性有clear:both的空p元素。

        header{
            width: 100%;
            height: 60px;
            line-height: 60px;
            color: orange;
            background-color: #000;
        }
        .header .left{
            float: left;
        }
        .header .right{
            float: right;
        }
        
    <div class="header">
        <span class="left">123</span>
        <span class="right">234</span>
    </div>

伪元素

我们知道了css中有伪类，其实伪元素的用法和伪类是大同小异的。它的本质是一个内联元素，是一个添加至选择器末尾的关键词，允许对被选择元素的特定部分修改样式，添加一些特殊效果。需要注意，伪元素中必须添加content参数。常见的一些为元素有::before、::after

        p::before{
            content: "";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        p::after{
            content: "";
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        
        <p>我想回家</p>

我们可以用伪元素来在父级清除浮动或在样式初始化清除浮动，代替空p元素，解决块级元素无法识别浮动流的问题，就像这样：

        <!-- 样式初始化，清除浮动 -->
        ul::after,
        div::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            width: 200px;
            border: 10px solid #000;
        }
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>