(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部分的更多相关文章

  1. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  5. 第二篇:web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

随机推荐

  1. (转)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 ...

  2. 2019年2月备战春招最新大数据+Java岗位+人工智能岗位资料免费送【限时领取】

    不多说,直接上干货! 欢迎大家,关注微信扫码并加入我的3个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑        每天都有大量的学习视频资料和精彩 ...

  3. 剑指offer例题分享--4

    前言:搁置许久的更新要继续开始了!前一段时间一直在忙项目和C++的学习,所以搁置了!要改变注意了,要用C++进行编写了,因为要不断练习C++! 面试题15: 书中要求只能遍历链表一次,所以代码如下: ...

  4. MFC控件编程之鼠标跟键盘消息

    MFC控件编程之鼠标跟键盘消息 在MFC中鼠标消息.键盘消息我们很常用.所以说一下. 鼠标消息分为客户区消息.跟非客户区消息. 一丶客户区消息 我们可以处理消息.来进行我们相应的函数即可. MFC添加 ...

  5. Go的50度灰:开发者要注意的陷阱和常见错误

    Go是一门简单有趣的语言,但与其他语言类似,它会有一些技巧...这些技巧的绝大部分并不是Go的缺陷造成的.如果你以前使用的是其他语言,那么这其中的有些错误就是很自然的陷阱.其它的是由错误的假设和缺少细 ...

  6. 分析windows .net程序dump文件的两种方式

    1.WinDbg 按照自己系统版本下载对应windbg(https://debugging.wellisolutions.de/windbg-versions/),win10版本自动下载文件符号,体验 ...

  7. 深入学习主成分分析(PCA)算法原理(Python实现)

    一:引入问题 首先看一个表格,下表是某些学生的语文,数学,物理,化学成绩统计: 首先,假设这些科目成绩不相关,也就是说某一科目考多少分与其他科目没有关系,那么如何判断三个学生的优秀程度呢?首先我们一眼 ...

  8. koa2入门使用总结

    koa2的介绍 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async ...

  9. SpringMVC学习(一)———— springmvc框架原理分析和简单入门程序

    一.什么是springmvc? 我们知道三层架构的思想,并且如果你知道ssh的话,就会更加透彻的理解这个思想,struts2在web层,spring在中间控制,hibernate在dao层与数据库打交 ...

  10. vue_drf之视频接口

    一.vue-video 1,安装依赖 npm install vue-video-player --save 2,main.js文件中加载组件 require('video.js/dist/video ...