html和css

w3c 规范

结构化标准语言
样式标准语言
行为标准语言

1）盒模型

常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2）css3 新特性

常问：

word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
audio音频
vadio视频
RGBA和透明度

css3 边框

border-radius 圆角
box-shadow 盒子阴影
border-image 边框图片

css3 背景

background-image 背景图片
background-size 背景大小
background-origin 背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制

css选择器及优先级

!important
内联样式
ID选择器
类选择器属性选择器伪类选择器
元素选择器关系选择器伪元素选择器
通配选择器

CSS选择器有哪些？哪些属性可以继承？

CSS选择符：

id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
相邻选择器(h1 + p)
子选择器（ul > li）、
后代选择器（li a）、
通配符选择器（*）、
属性选择器（a[rel=”external”]）、
伪类选择器（a:hover, li:nth-child）

可继承的属性：

font-size,
font-family,
color

不可继承的样式：

border,
padding,
margin,
width,
height

BFC

BFC是块级格式化上下文。

BFC应用:
防止margin重叠
清除内部浮动
自适应两栏布局
防止字体环绕

BFC的生成条件：
根元素
float值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute，fixed

图片整合技术的优势

减少对服务器的请求次数
减少图片体积，提高加载速度

元素垂直水平居中

1。不需要知道宽和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

2。需要知道宽和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

3。弹性盒

display:flex;
align-items:center;
justify-conter:center;

4.。元素水平居中

margin:0 auto;

css定位方式

position：static;//默认定位
position：relative;//相对定位 （参照物是自身,不脱离文档流）
position:absolute;//绝对定位 （参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。）
position:fixed;//固定定位 （参照物是可视区窗口，脱离文档流）
position:sticky;

rem和em的区别
总而言之，就是浏览器把谁转化成“px”
rem 依据的是html的font-size值。1rem=16px
em 依据的是父元素的font-size值。
清除浮动
方法一:clear:both

clear:both;

方法二:万能清除浮动

	.clean{
		content:'.';
		height:0;
		display:block;
		clear:both;
		overflow:hiddden;
		visibility:hidden;
	}

浏览器内核

Trident IE浏览器
Gecko Firefox浏览器
Webkit Chrome Safari
Blink Chrome Opera

移动端1像素问题

一般来说，在pc端浏览器中，设备像素比dpr等于1,1个css像素就等于1个物理像素；但是在retina屏幕中，dpr普遍是2或者3 ，1个css像素不在等于一个物理像素，因此在实际设计稿中粗不少。

伪元素+scale

.box{
	width:100%;
	height:1px;
	margin:20px 0;
	position:relative;
}
.box::after{
	content:'';
	position:absolute;
	bottom:0;
	width:100%;
	height:1px;
	transform:scaleY(0.5);
	transform-origin:0 0;
	background:red;
}

<div class="box"><div>

border-image

div{
	border-width:1px 0px;
	-webkit-border-image:url(xxx.png) 2 0 stretch;
	border-image:url(xxx.png) 2 0 stretch;
}

常见的布局方式

圣杯布局

body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

在这里插入图片描述
2. 双飞翼布局

body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

link 与 @import 的区别

a.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
b.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
c.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
d.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

来源：CSDN

作者：qb扛把子

链接：https://blog.csdn.net/qq_45927123/article/details/104044533

标签

css