第一天先更新html/css,还有后续JavaScript、vue、es6会持续更新
(看前先点赞,养成好习惯哈哈哈 )
css盒模型、BFC、css浮动、css经典布局、css兼容、css hack、html/ css基础
-
css盒模型
css盒模型基本概念?
- margin、border、padding、content。在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border)元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。
- 分类:标准模型、IE模型
标准模型和IE模型的区别:计算高度和宽度的不同,怎么不同,高度宽度是怎么计算的?
- 标准模型
div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度,div宽度会变化 box-sizing:content-box; /*设置标准盒子*/ 前端学习裙:950.919.261
- 怪异模型|IE模型
div宽度(定死) = 内容宽度+border宽度+padding宽度 //改变border宽度,div宽度不会变化 box-sizing:border-box; /*IE模型*/
-
BFC(边距重叠解决方案)
BFC的基本概念?
BFC(Block Formatting Context ):块级格式化上下文
IFC(CSS2.1):Inline Formating Contexts,内联元素格式化上下文
GFC(CSS3):GridLayout Formating Contexts,网格布局格式化上下文
FFC(CSS3):Flex Formatting Contexts,自适应格式化上下文
BFC原理/ BFC渲染规则?
1、BFC元素垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠(可用于清除浮动)
3、BFC为一个独立的元素,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素。
4、计算BFC高度的时候,浮动元素也会参与计算。
如何创建BFC?
1、float值不为none,即为left, right
2、position的值不为static(默认值),relative,即为absolute,fixed
3、display为inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不为visible,overflow为auto,hidden,scroll ;
5、使用fieldset元素(可以给表单元素设置环绕边框的html元素)
BFC的使用场景?
1、BFC垂直方向边距重叠
2、BFC不与float重叠
3、清除浮动:子元素是浮动元素的时候,把外层元素设置成BFC的时候,子元素的浮动元素也会参与到父级元素的高度计算上来。
-
css浮动
css浮动原理?
浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动元素引起的问题?
1、父元素的高度无法被撑开,影响与父元素同级的元素
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后
3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
css清除浮动的方法?
1、使用空标签 给所有浮动标签后面添加一个空标签,定义CSS clear:both. 但是这种方法会增加一个无意义的标签。 2、设置父级元素为BFC元素 3、使用after伪元素清除浮动 这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
-
css经典布局
三栏布局:左右各300px,中间自适应?
- 浮动float
<style>
html * {
padding:0;
margin:0;
}
.layout{
margin-top:20px;
}
.layout article div{
min-height:100px;
}
</style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width:300px;
background:red;
}
.layout.float .right{
float:right;
width:300px;
background:blue;
}
.layout.float .center{ /*块元素自动撑开*/
background:yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.这是三蓝布局中间部分
2.这是三蓝布局中间部分
</div>
</article>
</section>
- 绝对定位position:absolute
<!--绝对定位解决方案-->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position:absolute;
}
.layout.absolute .left{
left:0;
width:300px;
background:red;
}
.layout.absolute .center{
left:300px;
right:300px;
background:yellow;
}
.layout.absolute .right{
right:0;
width:300px;
background:blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三蓝布局中间部分
2.这是三蓝布局中间部分
</div>
<div class="right"></div>
</article>
</section>
- flex布局
<!--flexbox解决方案-->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top:140px;
}
.layout.flexbox .left-center-right{
display:flex;
}
.layout.flexbox .left{
width:300px;
background:red;
}
.layout.flexbox .center{
flex:1; /*中间自适应原理*/
background:yellow;
}
.layout.flexbox .right{
width:300px;
background:blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三蓝布局中间部分
2.这是三蓝布局中间部分
</div>
<div class="right"></div>
</article>
</section>
- 表格布局table-cell
<!--表格布局解决方案-->
<section class="layout table">
<style>
.layout.table .left-center-right{
width:100%;
display:table;
height:100px;
}
.layout.table .left-center-right>div{
display:table-cell;
}
.layout.table .left{
width:300px;
background:red;
}
.layout.table .center{
background:yellow;
}
.layout.table .right{
width:300px;
background:blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1.这是三蓝布局中间部分
2.这是三蓝布局中间部分
</div>
<div class="right"></div>
</article>
</article>
</section>
- 网格布局grid
<!--网格布局解决方案-->
<section class="layout grid">
<style media="screen">
.layout.grid .left-center-right{
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.layout.grid .left{
background:red;
}
.layout.grid .center{
background:yellow;
}
.layout.grid .right{
background:blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三蓝布局中间部分
2.这是三蓝布局中间部分
</div>
<div class="right"></div>
</article>
</section>
- 延伸
这5种方案的优缺点
①浮动:清除浮动,兼容性比较好。
②绝对定位:快捷,布局已经脱离了文档流,导致下面的元素也要脱离文档流,使用性较差。
③flex布局,解决了浮动和绝对定位的缺点,移动端基本已经支持了兼容性。
④表格布局:表格布局的兼容性非常好
⑤网格布局:新出的
如果“高度已知”去掉,中间内容高度撑开了,需要左右的高度也自动撑开,哪些方案仍适合
①flex、table能用
②flex左边有遮挡,所以显示在右边,没有遮挡的时候,就会显示在最左边。创建bfc - 三栏布局
①左右宽度固定,中间自适应
②上下高度固定,中间自适应。 - 两栏布局
①左宽度固定,右自适应
②右宽度固定,左自适应
③上高度固定,下自适应
④下高度固定,上自适应
圣杯布局?
- 圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。
- .left, .right的margin-left是为了让.main .left .right在同一行。
- .container的padding-left,padding-right,.left的position和left,right的position和left是为了防止文字被遮挡。
<style>
.main{
float:left;
width:100%;
}
.content{
height:200px;
margin-left:100px;
margin-right:200px;
background-color:green;
}
.main::after{
display:block;
content: '';
font-size: 0;
height:0;
clear: both;
zoom:1;
}
.left{
float:left;
width:100px;
height:200px;
margin-left:-100%; /*左栏移到第一行的首部*/
background-color:red;
}
.right{
float:left;
width:200px;
height:200px;
margin-left:-200px; /*右栏移到和左中一行*/
background-color:yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
-
css兼容
经常遇到的css兼容性的问题在哪些?如何解决的?
本都是ie8及以前的版本会遇到css兼容问题。一般是图片透明、圆角、字体大小,新出的css3样式。 aSuncat:如此老旧浏览器终究会被市场放弃,不花时间在这上面。 复制代码
-
css hack
什么是CSS hack?
针对不同的浏览器或浏览器不同版本写相应的CSS的过程,就是CSS hack 复制代码
CSS hack分类?
3种:条件hack、属性级hack、选择符hack。
// 1、条件hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、属性hack(类内部hack)
.test{
color:#090\9; /*For IE8*/
*color:#f00; /*For IE7 and earlier*/
_color:#ff0; /*For IE6 and earlier*/
}
// 3、选择符hack(选择器属性前缀法)
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/
CSS hack书写顺序?
CSS hack书写顺序,一般是将适用范围广、被识别能力强的CSS定义在前面。
-
html、css基础
link和@import的区别?
1、从属关系区别:
link属于html标签,而@import是css提供的。
2、加载顺序区别:
页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载。
3、兼容性区别:
import只在IE5以上才能识别,而link是html标签,无兼容问题。
4、dom可操作性区别:
可以通过JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式
5、权重区别:
如果已经存在相同样式,@import引入的这个样式将被该 CSS 文件本身的样式层叠掉,表现出link方式的样式权重高于@import的权重这样的直观效果。
(aSuncat:简而言之,link和@import,谁写在后面,谁的样式就被应用,后面的样式覆盖前面的样式。)
如何理解标签语义,它有哪些好处?
1、语义元素清楚地向浏览器和开发者描述其意义。
2、好处:
(1)html结构清晰,代码可读性较好。
(2)有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
(3)无障碍阅读,样式丢失的时候能让页面呈现清晰的结构。
(4)方便其他设备解析,如盲人阅读器根据语义渲染网页
(5)便于团队维护和开发,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
css的选择符有哪些,优先级如何计算,哪些属性可以继承?
- css选择符类型
1、通用选择器:*
2、类别选择器:.class
3、id选择器:#id
4、标签选择器:p
5、后代选择器:div p
6、子选择器:div > p
7、群组选择器:div , p
8、相邻同胞选择器:div +p
9、伪类选择器::link :visited :active :hover :focus :first-child
10、伪元素选择器::first-letter :first-line:before :after :lang(language)
11、属性选择器:[attribute] [attribute=value] [attribute~=value] [attribute|=value]
- 优先级计算
!important > 内联样式 > id > class > tag 3、属性继承 (1)所有元素可继承:visibility、cursor (2)块级元素可继承:text-indent、text-align (3)内联元素可继承: ①字体系列属性:font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust ②除text-indent、text-align之外的文本系列属性: letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction 扩展: 一、不可继承的样式属性:
1、display
2、文本属性:vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性:border、padding、margin、width、height
4、背景属性:background
5、定位属性:float、clear、position
6、生成内容属性:content
7、轮廓样式属性:outlien-style
8、页面样式属性:size
9、声音样式属性:pause-before
行内元素和块级元素举几个例子?
行内元素:span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
块级标签:div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr
伪类和伪元素?
伪类::active :focus :hover :link :visited :first-child
伪元素::before :after :first-letter :first-line
svg和canvas的区别?
1、canvas时h5提供的新的绘图方法 ;svg已经有了十多年的历史
2、canvas画图基于像素点,是位图,如果进行放大或缩小会失真 ;svg基于图形,用html标签描绘形状,放大缩小不会失真
3、canvas需要在js中绘制 ;svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ;svg可以获取到标签进行操作
flex实现原理?
1、容器上有主轴和纵轴的概念,默认主轴(main-axis)是横向,从左到右,纵轴是竖向,从上到下。
2、其中所有的孩子的布局都会受到这两个轴的影响。
3、有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。
src与href的区别?
1、href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
2、src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。