有关css的基础知识

👁 2021-02-28

熟悉有关CSS的内容

1 行内元素与块级元素的比较

常见的块级元素包括 div,p,h1-h6,ul,ol,dl
常见的行内元素包括 span,a,b,input
1.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
2.块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。
3.块级元素可以设置margin和padding属性，行内元素可以设置padding，水平方向的margin-left、margin-right可以产生外边距效果，竖直方向的margin-bottom、margin-top不会产生外边距效果。
4.可以通过修改元素的display属性来切换行内元素和块级元素。修改为块级元素对应display:block（此外还具有显示元素的作用），修改为行内元素对应display:inline。另外display:inline-block，可以让元素具有块级元素和行内元素的特性。

2 非替换元素与替换元素

1.替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如根据input标签的type属性来决定显示文本框还是密码框还是其他的。替换元素设置width,height来进行缩放。
2.非替换元素：HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如p标签。

3 img的title属性和alt属性

1.title是全局属性，可以不仅用于图片属性中。当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释。
2.alt是局部属性。倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页。
3.如果图片未能加载显示，仅设置alt属性就显示alt属性内容，仅设置title属性就显示title属性内容。两者同时设置，就显示alt属性内容。

4 meta 标签

meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
meta 标签位于文档的头部，不包含任何内容。meta 标签的属性定义了与文档相关联的名称/值对。

属性	值	描述
charset	character_set	定义文档的字符编码
content	text	定义与 http-equiv 或 name 属性相关的元信息
http-equiv	content-type、default-style、refresh	把 content 属性关联到 HTTP 头部。
name	application-name、author、description、generator、keywords	把 content 属性关联到一个名称

实例 1 - 定义文档关键词，用于搜索引擎：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：

<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：

<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：

<meta http-equiv="refresh" content="30">

实例 5 - 定义文档的字符编码：

<meta charset="UTF-8">

5 DOCTYPE 标签

定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 html 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
注意： <!DOCTYPE> 声明没有结束标签。
提示：<!DOCTYPE> 声明对大小写不敏感。

8 CSS 盒模型

CSS 盒模型由四部分组成：元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。
盒模型分别：W3C盒模型和IE盒模型。
W3C盒模型的width和height指content这部分。
IE盒模型的width和height指content、padding、border这三部分。
css如何设置这两种模型？

box-sizing:content-box;
box-sizing:border-box; /*IE模型*/
box-sizing默认属性是content-box

9 BFC

1.什么是BFC？
它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。触发了BFC的元素就是页面上完全隔离开的一个容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
2.触发BFC的条件
（1）float不为none，可以为left,right
（2）position不为relative和static
（3）overflow为auto scroll和hidden
（4）display的值为table-cell或inline-block

3.通过触发BFC可以解决的问题
（1）浮动元素的父元素高度塌陷

<style>
    .parent {
        width: 300px;
        background-color: yellow;
        overflow: hidden;
        /* float: left; */
    }
    .child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<!-- 子元素都浮动，脱离文档流，父元素无法察觉子元素的存在，父元素高度坍塌 
解决办法：父元素添加属性overflow:hidden或者dispaly:table-cell  或者display:block或者position:fixed/absolute等

有时出于布局需要，还有其他方法，让父元素也浮动，但是会影响父元素之后的元素的排列，或者给父元素固定高度，这个方法适用于子元素已知父元素高度。也可以在最后一个子元素添加伪元素选择器，清除浮动，复用不当会导致代码量增加-->
<div class="parent">
    <div class="child">123</div>
    <div class="child">456</div>
    <div class="child">789</div>
    <div class="child last">123</div>
</div>

（2）两栏自适应布局

第一种，一个元素浮动，另一个元素margin-left:第一个元素的宽度

<style>
    .box1 {
        width: 200px;
        float: left; 
        background-color: red;
    }
    .box2 {
        margin-left: 200px; 
        background-color: purple;
    }
</style>
<div class="box1">123</div>
<div class="box2">456</div>

第二种，利用定位实现

.box1 {
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: red;
    }
.box2 {
        margin-left: 200px; 
        background-color: purple;
    }

第三种

.box1 {
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: red;
    }
    .box2 {
        position: absolute;
        top: 0;
        right: 0;
        left: 200px;
        width: 100%;
        background-color: purple;
    }

第四种，使用flex

.parent {
    display: flex;
}
.box1 {
    width: 200px;
    background-color: red;
}
.box2 {
    flex: 1;
    background-color: purple;
}


<div class="parent">
    <div class="box1">123</div>
    <div class="box2">456</div>
</div>

（3）外边距垂直方向重合

<style>
    .box1 {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
        background-color: pink;
    }
    .box2 {
        width: 200px;
        height: 200px;
        padding-top: 20px;
        background-color: purple;
    }
    .parent {
        overflow: hidden;
    }
    /* 为其中一个元素设置一个父元素，并且触发BFC，比如父元素属性overflow:hidden */
    /* 第二种就是将margin-top换成padding-top */
</style>

<div class="box1">123</div>
<!-- <div class="parent"><div class="box2">456</div></div> -->
<div class="box2">456</div>

10 position属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
absolute：生成绝对定位的元素，相对于最近的非 static 定位的父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。会脱离文档流。
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。会脱离文档流。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。不会脱离文档流。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky：粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit：规定应该从父元素继承 position 属性的值。

11 隐藏元素的方法

css隐藏元素的方法常用的有三种，分别是display:none，visibility:hidden，opacity:0
三种方法的比较
display:none
页面中不存在，元素本来占有的空间就会被其他元素占有，会导致重排和重绘，鼠标无法接触到元素，不触发自身绑定事件。根据点击none元素结果，元素瞬间消失，不受transition影响。
visibility:hidden
页面中看不见，但是其占据的空间依旧会保留着，会导致浏览器重绘，不导致重排。鼠标无法接触到元素，不触发自身绑定事件。根据点击hidden元素结果，元素如同设置的效果时间隐藏，可是没有动画。
opacity:0
元素在页面中看不见，但是依旧占据着空间，不会导致重排，不一定会导致重绘。可触发自身绑定事件。根据点击opacity元素结果，元素如同设置的效果时间隐藏，有动画。

<style>
    div {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: aquamarine;
    }
    #none {
        display: none;
    }
    #hidden {
        visibility: hidden;
    }
    #opacity {
        opacity: 0;
    }
</style>
<div id="none">none</div>
<div id="hidden">hidden</div>
<div id="opacity">opacity</div>

<script>
    none = document.getElementById('none')
    hidden = document.getElementById('hidden')
    opacity = document.getElementById('opacity')
    none.onclick = function(){
        console.log('我是none')
    }
    hidden.onclick = function(){
        console.log('我是hidden')
    }
    opacity.onclick = function(){
        console.log('我是opacity')
    }
</script>

<style>
    div {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: aquamarine;
        transition: all linear 2s;
    }
</style>

<script>
    none = document.getElementById('none')
    hidden = document.getElementById('hidden')
    opacity = document.getElementById('opacity')
    none.onclick = function(){
        this.style.display = 'none'
    }
    hidden.onclick = function(){
        this.style.visibility = 'hidden'
    }
    opacity.onclick = function(){
        this.style.opacity = 0
    }
</script>

12 flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
容器属性：
flex-direction：flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap：flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：ustify-content属性定义了项目在主轴上的对齐方式。
align-items：align-items属性定义项目在交叉轴上如何对齐。
align-content：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
项目属性：
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

13 三栏布局

第一种，利用浮动布局

* {
    margin: 0px;
    padding: 0px;
}
.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    text-align: center;
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background-color: yellow;
    text-align: center;
}
.middle {
    height: 100px;
    background-color: purple;
    text-align: center;
}
<div class="mainbox">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中
        <p>利用浮动布局解决</p>
    </div>
</div>

第二种，利用定位实现

.mainbox2 {
    position: relative;
    margin-top: 20px;
    margin-bottom: 40px;

}
.left2 {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: blue;
    text-align: center;

}
.right2 {
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: yellow;
    text-align: center;

}
.middle2 {
    position: absolute;
    left: 100px;
    right: 100px;
    height: 100px;
    background-color: purple;
    text-align: center;

}
<div class="mainbox2">
    <div class="left2">左</div>
    <div class="right2">右</div>
    <div class="middle2">中
        <p>利用position解决</p>
    </div>
</div>

第三种，利用flex布局

    .mainbox3 {
        display: flex;
        margin-top: 40px;
    }

    .left3 {
        width: 100px;
        height: 100px;
        background-color: blue;
        text-align: center;

    }
    .right3 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        text-align: center;

    }
    .middle3 {
        flex: 1;
        height: 100px;
        background-color: purple;
        text-align: center;

    }
<div class="mainbox3">
    <div class="left3">左</div>
    <div class="middle3">中
        <p>利用flex布局解决</p>
    </div>
    <div class="right3">右</div>

</div>

14 H5和CSS3新特性

H5的新特性：
1.用于绘画 canvas 元素。
2.音频视频：video、audio 元素。
3.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
4.语意化标签：article、footer、header、nav、section。
5.datalist、keygen、output
5.新增表单控件类型，calendar、date、time、email、url、search、number、range。
6.新增表单属性：placehoder、required、min、max、width、height、autofocus、required、multiple。
7.地理定位。
8.拖拽。
9.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause。
css3的新特征:
1.选择器：

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd)  /* 按照奇数 */
:disabled /* 选择每个禁用的E元素 */
:checked /* 选择每个被选中的E元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */


伪类选择器

:link，:visited，:hover，:active

2.透明度。
3.多栏布局。

通过CSS3，能够创建多个列来对文本进行布局

column-count: 规定元素应该被分隔的列数
column-gap: 规定列之间的间隔
column-rule: 设置列之间的宽度、样式和颜色规则

4.动画（animation）、过渡（transition）
5.文本效果。

text-shadow    向文本添加阴影
text-justify    规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis    向元素的文本应用重点标记以及重点标记的前景色
text-outline    规定文本的轮廓
text-overflow    规定当文本溢出包含元素时发生的事情
text-wrap    规定文本的换行规则
word-break    规定非中日韩文本的换行规则
word-wrap    允许对长的不可分割的单词进行分割并换行到下一行
text-decoration    文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线

6.@font-face属性，自定义字体。
7.背景和边框

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域

边框：
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片

8.2D/3D转换：transform
9.盒模型

box-sizing

10.CSS 兼容内核

-moz-：代表FireFox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit-：代表safari、chrome浏览器私有属性
-o-：代表opera浏览器私有属性

参考链接

H5 和 CSS3 新特性

15 对超长字符串进行截取

    .box {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

<div class="box">我是一个很长很长很长很长的字符串字符串字符串字符串字符串字符串</div>

16 实现一个三角形

.box {
    width: 0;
    height: 0;
    border: 100px solid;
    border-top-color: red;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

<div class="box"></div>