前端整理——css部分
(1)盒模型(普通盒模型、怪异盒模型)
1、元素的content(内容)、padding(内边距)、border(边框)、margin(外边距)构成了CSS盒模型
2、IE盒模型和W3C盒模型
1)IE盒模型是怪异模式下的盒模型,W3C盒模型是标准模式下的盒模型;
2)IE盒模型的width/height包含了content的width/heigh+padding+border
W3C盒模型的width/height只是content的width/height
3、CSS3中的box-sizing
不同的人有不同的习惯,在css3中增加了box-sizing:content-box(遵循W3C盒模型)| border-box(遵循ie盒模型)|inherit(该属性的值从父元素继承)
(2)如何让元素水平居中
1、绝对定位实现水平垂直居中:
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
注意:
1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。
2>如果只要垂直居中,可以不写right: 0;left: 0;
margin: auto; 可以换成 margin-top: auto; margin-bottom: auto;
3>如果只需要水平居中,top: 0; bottom: 0; 可以省略不写
margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。
2、确定高度的块级元素居中:
position:absolute;
top:50%;
margin-top:(自身高度的值的一半的负值)
3、对不定高的div实现垂直居中
a、利用css3的弹性布局实现
在父元素的css样式中加入以下代码:
display:flex;
justify-center:center;
align-items:center;
b、利用平移实现
在子组件中加入以下代码:
position:relative:
left:50%;
top:50%;
transform:translate(-50%,-50%);
-weikit-transform: translate(-50%,-50%);
4、一段文本、一张图片水平居中
text-content:center;
图片是行内元素,在 ie, edge, chrome, firefox, opera 中对于 img 的默认显示方式是: display: inline;
5)块级元素水平居中,使用margin:auto;
6)单行文本垂直居中 ,让height和line-height相等
注意:当box-sizing:content-box时,line-height和height相等;
当box-sizing:border-box时,line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四个值,也就是说line-height等于content的有效高度。
(3)浮动&清浮动
1、是什么浮动?
浮动的元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。
2、为什么要清浮动?
浮动会导致父元素的高度塌陷。当父元素不设置高度,由内容撑开时,浮动元素脱离了文档流,并不占据文档流的位置,父元素就不能被撑开,也就没有了高度。所以需要通过清浮动来解决父元素高度坍塌的问题。
3、清浮动的方式:
1)clear清除浮动
在浮动元素后面添加一个空的div,设置clear属性为both。
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,原理在被清除浮动的元素上面或者下面添加足够的清除空间。
2)clear清除浮动的最佳实践:利用伪类元素来清除有浮动的标签
IE8和非ie浏览器才支持:after,相当于在该元素后面添加了一个空元素,利用clear:both清除浮动。zoom可解决ie6、ie7的浮动问题。
<div class="box clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
<style>
.clearfix::after{ //向元素的内容之后添加新内容
display: block;
content:'';
clear:both;
visibility:hidden;
height:0
}
.clearfix{
zoom:1;
}
</style>
3)父级div定义overflow:hidden
原理:必须要定义width或zoom:1,同时不能定义高,使用overflow:hidden时,浏览器会自动检查浮动区域的高度。缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
(4)圣杯布局和双飞翼布局
圣杯布局和双飞翼布局都是三栏布局,两边的盒子宽度固定,中间盒子宽度自适应。
1)圣杯布局
写结构时优先写中间盒子,因为中间盒子优先被渲染,设置其自适应,宽度设为100%。中间栏放在文档流前面以优先渲染。
第一步:设置center宽度为100%,然后left和right设置固定宽度。然后三个div都左浮动。
第二步:设置最外层包裹box: padding-left:200px;padding-right:250px;
第三步:设置left: margin-left: -100%; 设置right:margin-left: -250px;
第四步:需要将left和right通过相对定位移动到两侧
注意:最好给body加一个最小宽度min-width
圣杯布局有个问题,就是当面板的main部分比两个子面板宽度小的时候,布局就会乱掉。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
min-width:550px;
}
#box{
height:700px;
padding-left:200px;
padding-right:250px;
}
.content {
background: yellow;
width:100%;
height:600px;
float:left;
}
.left {
background: pink;
width:200px;
height:600px;
float:left;
margin-left: -100%;
position: relative;
left:-200px;
}
.right {
background: yellowgreen;
width:250px;
height:600px;
float:left;
margin-left: -250px;
position: relative;
right:-250px;
}
</style>
</head>
<body>
<div id="box">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
2)双飞翼布局
<body>
<div class="box">
<div class="main">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
<style>
*{margin:0;padding:0;}
body{
min-width:500px;
}
.main{
width:100%;
background: palevioletred;
float:left;
}
.left{
width:150px;
background: greenyellow;
float:left;
margin-left:-100%;
}
.right{
width:200px;
background: yellow;
float:left;
margin-left:-200px;
}
.center{
margin:0 200px 0 150px;
}
</style>
https://www.zhihu.com/question/21504052/answer/50053054
圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:
圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。
双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div,少用大致4个css属性(圣杯布局中间divpadding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4),个人感觉比圣杯布局思路更直接和简洁一点。
简单说起来就是”双飞翼布局比圣杯布局多创建了一个div,但不用相对布局了“。
前端整理——css部分的更多相关文章
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇:web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- (转)Apache从2.2换至2.4httpd.conf的调整笔记(windows环境)
原文:https://www.cnblogs.com/tjws/articles/3469075.html#top 整理一下Windows环境Apache 2.2 改成 Apache 2.4.1后 h ...
- 2019年2月备战春招最新大数据+Java岗位+人工智能岗位资料免费送【限时领取】
不多说,直接上干货! 欢迎大家,关注微信扫码并加入我的3个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 每天都有大量的学习视频资料和精彩 ...
- 剑指offer例题分享--4
前言:搁置许久的更新要继续开始了!前一段时间一直在忙项目和C++的学习,所以搁置了!要改变注意了,要用C++进行编写了,因为要不断练习C++! 面试题15: 书中要求只能遍历链表一次,所以代码如下: ...
- MFC控件编程之鼠标跟键盘消息
MFC控件编程之鼠标跟键盘消息 在MFC中鼠标消息.键盘消息我们很常用.所以说一下. 鼠标消息分为客户区消息.跟非客户区消息. 一丶客户区消息 我们可以处理消息.来进行我们相应的函数即可. MFC添加 ...
- Go的50度灰:开发者要注意的陷阱和常见错误
Go是一门简单有趣的语言,但与其他语言类似,它会有一些技巧...这些技巧的绝大部分并不是Go的缺陷造成的.如果你以前使用的是其他语言,那么这其中的有些错误就是很自然的陷阱.其它的是由错误的假设和缺少细 ...
- 分析windows .net程序dump文件的两种方式
1.WinDbg 按照自己系统版本下载对应windbg(https://debugging.wellisolutions.de/windbg-versions/),win10版本自动下载文件符号,体验 ...
- 深入学习主成分分析(PCA)算法原理(Python实现)
一:引入问题 首先看一个表格,下表是某些学生的语文,数学,物理,化学成绩统计: 首先,假设这些科目成绩不相关,也就是说某一科目考多少分与其他科目没有关系,那么如何判断三个学生的优秀程度呢?首先我们一眼 ...
- koa2入门使用总结
koa2的介绍 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async ...
- SpringMVC学习(一)———— springmvc框架原理分析和简单入门程序
一.什么是springmvc? 我们知道三层架构的思想,并且如果你知道ssh的话,就会更加透彻的理解这个思想,struts2在web层,spring在中间控制,hibernate在dao层与数据库打交 ...
- vue_drf之视频接口
一.vue-video 1,安装依赖 npm install vue-video-player --save 2,main.js文件中加载组件 require('video.js/dist/video ...