0.盒子模型

width 盒子的宽 height 盒子的高 margin 盒子的外边距就是盒子与盒子之间的距离 padding 盒子的内边距 border 盒子的边框 background 盒子背景

标准盒子模型：width+height

IE盒子模型：width+height+border+padding

box-sizing: border-box；就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。 box-sizing属性的取值可以为content-box或border-box content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。 border-box：当定义width和height时，border和padding的参数值被包含在width和height之内

1.弹框定位、居中

html

<div class="dialog">
    <div class="content">
        这是内容
    </div>
</div>

css 子级定位设置上右下左四个方向为0，marign：auto

.dialog {
    width: 100%;
    height: 100%;
    position: fixed;    
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
.content {
    width: 200px;
    height: 200px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

弹性盒子设置居中，子级无须定位，给父级设置

.dialog {
    width: 100%;
    height: 100%;
    position: fixed;    
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.content {
    width: 200px;
    height: 200px;
    background: #fff;
}

用left: 50%, top: 50%; 也会居中在中间

.dialog {
    width: 100%;
    height: 100%;
    position: fixed;    
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
.content {
    width: 200px;
    height: 200px;
    background: #fff;
    position:fixed;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

position position 有5个值 static、fixed、relative、absolute、sticky，static是默认属性，不受top、right、left、bottom影响，fixed相对于window的这个窗口进行定位，即使页面滚动他还是会在同一个位置，relative元素相对于其正常位置进行定位，受top、right、bottom、left影响，absolute的元素相对于最近的定位父级元素进行定位，如果绝对定位的元素没有父级元素（向上查找一直到body）进行relative，它将使用文档主体（body），并随页面滚动一起移动，sticky的元素根据用户的滚动位置进行定位。sticky粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置，IE/Edge 15 以及更早的版本不支持粘性定位。

<div class="sticky-container">
     <div>内容</div>
     <div class="sticky-content">我是要粘性定位的，我是要粘性定位的，我是要粘性定位的，我是要粘性定位的，我是要粘性定位的，我是要粘性定位的，我是要粘性定位的，我是要粘性定位的，</div>
     <div>内容</div>
</div>

.sticky-container {
    width: 500px;
    height: 500px;
    overflow: auto;
}
.sticky-content {
    position: sticky;
    top: 0;
    background: #ff0;
}

2.弹性布局

圣杯布局

<header class="header"></header>
<main class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</main>
<footer class="footer"></footer>

body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
}
.header {
    width: 100%;
    height: 40px;
    background: red;
}
.main {
    flex: 1;
    display: flex;
}
.main div {
    float: left;
}
.main .left {
    width: 200px;
    height: 100%;
    background: rgb(235, 235, 6);
}
.main .right {
    width: 200px;
    height: 100%;
    background: rgb(199, 199, 163);
}
.main .middle {
    flex: 1;
    height: 100%;
    background: rgb(47, 178, 51);
}
.footer {
    width: 100%;
    height: 40px;
    background-color: rgb(115, 15, 210);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.header {
    width: 100%;
    height: 40px;
    background: red;
}
.main {
    /* flex: 1; */
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
}
.main div {
    float: left;
}
.main .left {
    width: 200px;
    height: 100%;
    background: rgb(235, 235, 6);
}
.main .right {
    width: 200px;
    height: 100%;
    background: rgb(199, 199, 163);
}
.main .middle {
    flex: 1;
    height: 100%;
    background: rgb(47, 178, 51);
}
.footer {
    width: 100%;
    height: 40px;
    background-color: rgb(115, 15, 210);
}

分析下弹性布局以及常用属性 左侧固定，右侧自适应布局

.flex-parent {
    width: 100%;
    height: 500px;
    display: flex;
}
.flex-left {
    width: 200px;
    height: 500px;
}
.flex-right {
    flex: 1;
}
<div class="flex-parent">
    <div class="flex-left"></div>
    <div class="flex-right"></div>
</div>

flex-direction: row（默认值）：主轴为水平方向，起点在左端 | row-reverse：主轴为水平方向，起点在右端 | column：主轴为垂直方向，起点在上沿 | column-reverse：主轴为垂直方向，起点在下沿

.flex-parent {
    display: flex;
    flex-direction: column-reverse;
}

justify-content：flex-start(默认值) | flex-end | center | space-between | space-evenly | space-around justify-content: end; justify-content: center; 水平居中 justify-content: space-around; 1的宽度等于2宽度的一半 justify-content: space-between;元素和两端对齐 justify-content: space-evenly; 1和2的宽度一样宽 align-items：normal：在弹性布局中，效果和stretch一样 | stretch：如果子元素未设置高度或设为auto，将占满整个父元素容器的高度 | flex-satrt | flex-end | center | baseline align-items: normal; 子容器没有设置高度 align-items: stretch; align-items: flex-satrt; align-items: flex-end; align-items: center; align-items: baseline;子元素一定要设置高度 flex-wrap: nowrap 项目不换行(默认值) | wrap 项目在超出容器时进行换行 | wrap-reverse 同 wrap 值，只是换成反序方向 flex-wrap: nowrap; 不换行当所有子元素的宽加起来大于父元素的宽，子元素会平分父元素的宽， flex-wrap: wrap; flex-wrap: wrap-reverse; flex: flex-grow | flex-shink | flex-basis的简写可以指定1 2 3个值依次按照上述顺序！默认值为 0 1 auto flex-grow: 定义了item的放大比例，如果为0，即使有剩余空间也不会放大, 通俗理解：container有1800px宽度，6个item分别为200px，那么container剩余的宽度则为 600px，flex-grow就是用来设置box怎样瓜分剩余空间（宽度）flex-grow取值为非负数 > 0（注：如果取值为负数那么和0的取值效果相同） flex-shrink: flex-shrink指的是当flex容器空间不足时候，单个元素的收缩比例, 不支持负值，默认值是1，也就是默认所有的flex子项都会收缩。如果设置为0，则表示不收缩，保持原始的宽度。 flex-basis: flex-basis表示在flex items 被放入flex容器之前的大小，也就是items的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度，flex items的min-width,max-width等其他样式，当flex-basis和width属性同时存在时，width属性不生效，flex item的宽度为flex-basis设置的宽度, flex-basis详情分析查看

图片自适应居中

html

<div class="img-container">
    <img src="./images/1.jpeg" alt="">
</div>

css

/* 方法一 */
.img-container {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 对图片进行剪切，保留原始比例 */
}

/* 方法二 */
.img-container {
    width: 500px;
    height: 500px;
    background: red;
}
img {
    width:auto;
    height:auto;
    /*不定宽高的图片居中显示*/
    max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 方法三 */
.img-container {
    width: 500px;
    height: 500px;
    background: red;
    display: table-cell;
    vertical-align: middle; /* 只对行内元素有效，对块内元素无效 */
    text-align: center;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
}

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。关于display: table;更多的属性点击吧

/* 方法四 */
.img-container {
    width: 500px;
    height: 500px;
    background: red;
    display: flex;
    justify-content:center;
    align-items:center;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
}

图片划过放大效果

html

<div class="img-box">
    <img src="./images/1.jpeg" alt="">
    <p>text-shadow</p>
</div>

css

/* 悬停放大图片特效 */
.img-box {
    width: 400px;
    height: 400px;
    /* overflow: hidden; */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    text-shadow: 10px 10px 10px #f00;
    display: inline-block;
    box-sizing: border-box;
}
.img-box img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}
.img-box img:hover {
    transform: scale(1.1);
}

box-show

transform

/* 不同浏览器的内核 兼容浏览器 */
div {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg);  /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	 /* Opera */
}

transform: none|transform-functions;

translate(X, Y) 位移 X表示水平方向，Y表示垂直方向 translate(50px, 50px), 可以设置负数 translate3d(X, Y, Z)

body {
    /* 使用transform:translate3d必须使用设置视距,否则z轴移动无法直观观测 */
    /* perspective视距值一般取800-1200px */
    /* 此函数给父级元素加 */
    perspective: 800px;
}
.transform-container {
    width: 200px;
    height: 200px;
    background: rgb(168, 87, 87);
}
.transform-container:hover {
       transform: translate3d(0px, 0px, -70px);
}

scale(X, Y) 缩放，scale3d(X, Y, Z), scale(1, 1) rotate(X, Y) 旋转 rotate(45deg, 45deg) skew(60deg, 60deg) 倾斜旋转

transition

把鼠标指针放到 div 元素上，其宽度会从 200px 逐渐变为 300px：

.transition-container {
    width: 200px;
    height: 200px;
    background: rgb(76, 76, 155);
    transition: width 2s;
    -moz-transition: width 2s;/* Firefox 4 */
    -webkit-transition: width 2s;/* Safari and Chrome */
    -o-transition: width 2s;/* Opera */
}
.transition-container:hover {
    width: 300px;
}

transition: property duration timing-function delay;

transition-property: 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。

animation

简写方式：animation: name duration timing-function delay iteration-count direction fill-mode @keyframes：规定动画；animation：所有动画属性的简写属性，除了animation-play-state属性；animation-name: 规定@keyframes动画的名称。（必须的）；animation-duration：规定动画完成一个周期所用的时间，秒或者毫秒。（必须的）；animation-timing-function：规定动画的速度曲线，默认是ease；animation-delay：规定动画何时开始，默认0，延迟的时间；animation-iteration-count：规定动画被播放的次数，默认是1，还有infinite；animation-diretion：规定动画是否在下一周期逆向播放，默认是“normal”，“alternate”逆播放；animation-play-state：规定动画是否正在运行和暂停，默认是“running”，还有“pause”，animation-fill-mode：规定动画结束的状态，保持forwards回到backwards； 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用；盒子动画结束后，停在结束位置：animation-fill-mode: forwards

.animation-container {
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    /* 动画名称 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 5s;
    /* 动画速度曲线 */
    animation-timing-function: ease-in;
    /* 动画开始时间 */
    animation-delay: 2s;
    /* 动画播放次数 */
    animation-iteration-count: 3;
    /* 动画播放方向 */
    animation-direction: alternate;
    /* 动画结束后状态 */
    animation-fill-mode: forwards;
}
@keyframes move {
    /* from{
        transform: translate(0, 0);
    }
    to {
        transform: translate(1000px, 1000px);
    } */
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1000px, 0);
    }
    50% {
        transform: translate(1000px, 500px);
    }
    75% {
        transform: translate(0, 500px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.animation-container:hover {
    animation-play-state: paused;
}

animation和transition大部分属性相同，主要区别是transition是需要手动给个事件才能触发，而animation可以自动触发，并且可以设置每一帧的动画 @keyframes %百分比'。

清除浮动

1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。如果一个块级元素没有设置height，它的height是由子元素打开的。 2、使用浮动后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以打开其高度，所以父级元素的height会被忽略。这就是所谓的高度塌陷。

/* 给父元素的伪类加 */
.f-container::after {
    content: "";
    visibility: hidden;
    display: block;
    clear: both;
}

在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。

::before与:before的的异同点

相同点：

1、伪类对象，用来设置对象前的内容

2、::before和:before写法是等效的

不同点：

:befor是CSS2的写法，::before是CSS3的写法

:before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

说明：

1、伪类元素要配合content属性一起使用

2、伪类元素是css渲染层加入的，不能通过js来操作

3、伪类对象特效通常通过:hover伪类样式来激活

.test:hover:before {
    
}

文本溢出省略号显示

单行

overflow: hidden; /*文本不会换行*/ 
white-space: nowrap; /*当文本溢出包含元素时，以省略号表示超出的文本*/ 
text-overflow: ellipsis;

多行

display:-webkit-box;
-webkit-box-orient:vertical;/*设置方向*/
-webkit-line-clamp:2;/*设置超过为省略号的行数*/
overflow:hidden;
text-overflow:ellipsis;

元素的显示隐藏

visibility:hidden 展位隐藏； display:none不占位隐藏； opacity：0 透明度为0，盒子内的元素会一起变透明值在0-1之间；background: rgba(); 设置的只是背景的透明度；

CSS权重优先级

1. 内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）

2. ID选择器，如：#header，权值为100.

3. 类、伪类、属性选择器如：.bar，权值为10.

4. 标签、伪元素选择器，如：div ::first-line 权值为1.

5.!important 大于一切权重；优先级最高

6.权重相同的，后写的会覆盖先写的

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

link和@import的区别

1. link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

2. import只在IE5以上才能识别，而link是HTML标签，无兼容问题

3. link方式的样式的权重高于@import的权重.

title和alt属性的区别点击

alt

1. 如果无法显示 <img /> 图像, 浏览器将显示 alt 属性设置的内容为替代文本。

2. alt 是给搜索引擎识别, 在图像无法显示时的替代文本;

3. 当用户无法查看图像时（可能由于网速太慢、错误的 src 属性、或者用户使用的是屏幕阅读器），alt 属性为图像提供了替代的文本。

4. (因为IE不标准)在低版本 IE 浏览器中 alt 起到了 title 的作用, 变成文字提示。 1. 在定义 img 对象时, 将 alt 和 title 属性写全, 可以保证在各种浏览器中都能正常使用。

5. alt 属性使用规则: 1.如果图像中包含信息，则 alt 文本应该对图像进行描述; 2. 如果图像位于 <a> 元素中，则 alt 文本应该解释链接指向哪里; 3. 如果图像是纯装饰性的，请使用 alt=""

title

1. title 属性规定关于元素的额外信息。

2. 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

3. title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。

4. 总结为: title 是关于元素的注释信息, 主要是给用户解读。

title 和 alt 的区别

1. 前者 alt 是在图片无法加载的时候才会显示的其值;

2. 而 title 是在图片正常加载鼠标划上去显示的值;

3. 虽然 alt 也有后者的功能, 但是只是在低版本的 ie 浏览器才支持, 高版本及标准浏览器不支持这个功能了。

用css写一个对话框

对话框由两部分组成；三角形和长方形

<div class="dialogue-container"></div>
.dialogue-container {
    width: 300px;
    height: 40px;
    line-height: 40px;
    margin: 100px 0 0 100px;
    position: relative;
    background: rgb(45, 114, 137);
}
.dialogue-container::before {
    content: '';
    position: absolute;
    border: 12px solid;
    border-color: transparent rgb(45, 114, 137) transparent transparent;
    left: -24px;
    top: 8px;
}

用display: inline-block;会出现的问题

两个inline-block在一起的元素会产生空白缝隙 产生空白缝隙的原因： 元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。这些元素之间的间距会随着不同环境而变化(字族、字体大小、white-space都会影响)。

解决方法

1.将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行

2.父元素中设置font-size: 0，在子元素上重置正确的font-size

3.为子元素设置float:left

HTML+CSS