(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. tomcat编译超过64k大小的jsp文件报错原因

    今天遇到一个问题,首先是在tomcat中间件上跑的web项目,一个jsp文件,因为代码行数实在是太多了,更新了几个版本之后编译报错了,页面打开都是报500的错误,500的报错,知道http协议返回码的 ...

  2. String字符串相加常见面试题

    String name1="jack"; String name2="jack"; System.out.println(name1==name2); // t ...

  3. mysql 开发基础系列10 存储引擎 InnoDB 介绍

    一. 概述: InnoDB存储引擎提供了具有提交,回滚,和崩溃恢复能力的事务安全,对比MYISAM 的存储引擎,InnoDB写的处理效率差一些并且会占用更多的磁盘空间以保留数据和索引.它的特点有如下: ...

  4. 10 Tensorflow模型保存与读取

    我们的模型训练出来想给别人用,或者是我今天训练不完,明天想接着训练,怎么办?这就需要模型的保存与读取.看代码: import tensorflow as tf import numpy as np i ...

  5. spring jdbcTemplate 事务,各种诡异,包你醍醐灌顶!

    前言 项目框架主要是spring,持久层框架没有用mybtis,用的是spring 的jdbc: 业务需求:给应用添加领域(一个领域包含多个应用,一个应用可能属于多个领域,一般而言一个应用只属于一个领 ...

  6. 使用3D Slicer对图像进行配准

    在进行深度学习之前,我们需要图像进行一些预处理操作,其中配准是很重要的一环,以下将介绍使用软件3D Slicer来进行图像配准 3D Slicer是(1)一个软件平台,用以图像分析(包括配准和实时编辑 ...

  7. 痞子衡嵌入式:蓝牙芯片厂商三强(Qualcomm&CSR, TI, Nordic)产品一览

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是蓝牙芯片三强厂商的芯片. IoT物联网是未来的趋势,半导体厂商作为IoT产业的上游,主要提供核心的无线芯片,蓝牙是比较主流的协议,下面痞 ...

  8. .NET线程池最大线程数的限制-记一次IIS并发瓶颈

    .NET ThreadPool 最大线程数的限制 IIS并发瓶颈,有几个地方,IIS线程池的最大队列数,工作进程数,最大并发数.这些这里就不展开.主要是最近因为过度使用Task 导致的线程数占用过多, ...

  9. 设计shell脚本选项:getopt

    man 1 getopt翻译:https://www.cnblogs.com/f-ck-need-u/p/9757959.html 写shell脚本的时候,通过while.case.shift来设计脚 ...

  10. 翻译:XtraDB/InnoDB中的AUTO_INCREMENT处理方式(已提交到MariaDB官方手册)

    本文为mariadb官方手册:XtraDB/InnoDB中的AUTO_INCREMENT处理方式的译文. 原文:https://mariadb.com/kb/en/auto_increment-han ...