【Web】CSS 经典样式及问题思考
来源:互联网 发布:人工智能语言有哪些 编辑:程序博客网 时间:2024/05/22 00:31
CSS 经典样式及问题思考
盒模型问题及处理
当你设置了元素的宽度,实际展现的元素却超出你的设置:这是因为元素的边框和内边距会撑开元素。
盒模型效果css:
.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}
问题解决:新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box;
.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
另外可以添加为页面全局有效
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
Position使用及特殊处理
position属性和top、right、bottom、left配合使用,用以设定元素的位置
static
默认属性,表示不会被”positioned“
relative
相对定位,配合top、right、bottom、left使用,表示在原来的位置相对移动
fixed
固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom和 left 属性都可用。
移动端对fixed支持总结: http://bradfrost.com/blog/mobile/fixed-position/
移动端判断浏览器是否支持fixed属性方法如下:
function isSupportFixed() { var userAgent = window.navigator.userAgent, ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/), ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, '.'), 10) < 5), operaMini = /Opera Mini/i.test(userAgent), body = document.body, div, isFixed; div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed;z-index:100;'; body.appendChild(div); isFixed = window.getComputedStyle(div).position != 'fixed'; body.removeChild(div); div = null; return !!(isFixed || ios5below || operaMini);}说明: 对于不支持fixed的浏览器,window.getComputedStyle(div).position计算出来的值会是absolute。z-index 属性设定了Z轴的位置,元素的默认z-index是0,要始终显示在最上层,可以通过设定z-index
absolute
absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。
如果祖先元素是 position: static; ,那么它的绝对定位子元素会跳过它直接相对于body元素定位。
Float使用
Float属性即浮动属性,设置了float属性的元素是在包含块中浮动显示,会影响自身位置,同时也会影响周围元素的对齐和环绕,其中包含块概念如下:
包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素。
Float浮动位置和周围位置的关系,此处不做赘述。
清除浮动
高度塌陷:一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。
解决方法就是清除浮动。
方法1
哪里有浮动元素,就在其父级元素的内容中增加一个
<div style="clear:both"></div>
方法2
在父元素上设置:overflow:hidden 或者 overflow: auto
方法3
after伪元素
.floatParent{}.floatParent:after { display:block; content:''; clear:both; height:0; visibility:hidden;}
移动端显示
使用 meta viewport:
https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
Display属性
block:块级属性,会重新开始一行并撑满容器。常用块级元素有:div、p、form、header、footer、section
inline:行内元素,占用一行并自动换行。常用行内元素有:span、a(用作链接元素)
none:不删除元素的情况下不显示元素,类似于Android View.Gone
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递,它是inline和block的结合
更多display属性:https://developer.mozilla.org/en-US/docs/Web/CSS/display?v=control
flex
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
容器具有以下属性:
1.flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向).
.box { flex-direction: row | row-reverse | column | column-reverse;}
2.flex-wrap
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>;}
4.justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around;}
5.align-items
align-items属性定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
6.align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
垂直居中布局的一种实现
.vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
参考链接
学习CSS布局:http://zh.learnlayout.com/
CSS示例:http://www.w3school.com.cn/example/csse_examples.asp
Flex: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- 【Web】CSS 经典样式及问题思考
- css样式失效及中文乱码问题
- CSS样式经典
- css经典样式
- css经典样式
- 【Web 前端】CSS样式
- Web--Css样式大全
- web-inf文件夹下的外联css样式路径问题
- CSS按钮样式大全(经典)
- CSS按钮样式大全(经典)
- 关于CSS中的居中问题的思考及解决方案
- CSS样式及小记
- CSS样式问题集锦
- 一些css样式问题
- IE css样式问题
- Css样式优先级问题
- 一些css样式问题
- CSS 样式问题(important)
- Android技术前沿:RxBus的实践
- 更清晰的Dagger2 + MVP 架构
- Android技术前沿:DBFlow的实践
- 并发(十四):异步Servlet与AJAX的区别与联系
- Android Native-Web交互框架
- 【Web】CSS 经典样式及问题思考
- Daggger2 概念解读、使用姿势及源码分析(1)
- Android 模块化实践之路 (1)
- Daggger2 概念解读、使用姿势及源码分析(2)
- Android自定义键盘:数字键盘和字母键盘
- Android动画学习(七)之转场动画
- 算法(一):全排列实现与尾递归
- Oracle中distinct的用法实例以及Oracle distince 用法和删除重复数据
- 2017 Multi-University Training Contest