前端整理——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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- tomcat编译超过64k大小的jsp文件报错原因
今天遇到一个问题,首先是在tomcat中间件上跑的web项目,一个jsp文件,因为代码行数实在是太多了,更新了几个版本之后编译报错了,页面打开都是报500的错误,500的报错,知道http协议返回码的 ...
- String字符串相加常见面试题
String name1="jack"; String name2="jack"; System.out.println(name1==name2); // t ...
- mysql 开发基础系列10 存储引擎 InnoDB 介绍
一. 概述: InnoDB存储引擎提供了具有提交,回滚,和崩溃恢复能力的事务安全,对比MYISAM 的存储引擎,InnoDB写的处理效率差一些并且会占用更多的磁盘空间以保留数据和索引.它的特点有如下: ...
- 10 Tensorflow模型保存与读取
我们的模型训练出来想给别人用,或者是我今天训练不完,明天想接着训练,怎么办?这就需要模型的保存与读取.看代码: import tensorflow as tf import numpy as np i ...
- spring jdbcTemplate 事务,各种诡异,包你醍醐灌顶!
前言 项目框架主要是spring,持久层框架没有用mybtis,用的是spring 的jdbc: 业务需求:给应用添加领域(一个领域包含多个应用,一个应用可能属于多个领域,一般而言一个应用只属于一个领 ...
- 使用3D Slicer对图像进行配准
在进行深度学习之前,我们需要图像进行一些预处理操作,其中配准是很重要的一环,以下将介绍使用软件3D Slicer来进行图像配准 3D Slicer是(1)一个软件平台,用以图像分析(包括配准和实时编辑 ...
- 痞子衡嵌入式:蓝牙芯片厂商三强(Qualcomm&CSR, TI, Nordic)产品一览
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是蓝牙芯片三强厂商的芯片. IoT物联网是未来的趋势,半导体厂商作为IoT产业的上游,主要提供核心的无线芯片,蓝牙是比较主流的协议,下面痞 ...
- .NET线程池最大线程数的限制-记一次IIS并发瓶颈
.NET ThreadPool 最大线程数的限制 IIS并发瓶颈,有几个地方,IIS线程池的最大队列数,工作进程数,最大并发数.这些这里就不展开.主要是最近因为过度使用Task 导致的线程数占用过多, ...
- 设计shell脚本选项:getopt
man 1 getopt翻译:https://www.cnblogs.com/f-ck-need-u/p/9757959.html 写shell脚本的时候,通过while.case.shift来设计脚 ...
- 翻译:XtraDB/InnoDB中的AUTO_INCREMENT处理方式(已提交到MariaDB官方手册)
本文为mariadb官方手册:XtraDB/InnoDB中的AUTO_INCREMENT处理方式的译文. 原文:https://mariadb.com/kb/en/auto_increment-han ...