css布局box-sizing使用

div{

box-sizing:border-box;

width:200px;

padding:20px;

border:1px solid red;

}

这段css的意思是说,div宽度为200px,边框为1px,左右空白边距是20px,时间内容宽度自适应,是200-2-20*2=158px;

如果box-sizing的值为content-box,说明设置的是内容区的宽度,不是div盒子的宽度;

浏览器兼容性:

ie8以上支持该属性,firefox需要加上浏览器厂商前缀-moz-,低版本的IOS和Android浏览器也需要加上-webkit-

*,*:before,*:after{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

时间: 2024-10-02 10:23:00

css布局box-sizing使用的相关文章

div css布局兼容性问题

在strict mode中:width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right; 在quirks mode中:width则是元素的实际宽度 ,内容宽度 = width – (margin-left + margin-right + padding-left + padding-rig

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

转载:解读CSS布局之-水平垂直居中(1)

本文转自http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/,以及大地dudy的博客http://www.cnblogs.com/Dudy/p/4085292.html. 对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方法,是没有去考虑IE的,如果有

CSS布局相关概要

一.文档流 运用css布局首先要具备一些概念上的知识,文档流的概念充斥着布局的整个过程.浏览器渲染页面是有先后顺序的,其顺序是至上而下,根据HTML的文档结构进行渲染. 二.div+css 耳熟能详的div+css布局指的是:仅用容器标签div配合css样式进行布局.以往的table布局是不推荐使用的. 三.display: none / block/ inline / inline-block 设置元素的显示方式,以上为常见的取值.这是布局中非常重要的概念 block块元素:独自占据一行的元素

Flexbox制作CSS布局实现水平垂直居中

Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"/>  <title>Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">    html {      height: 1

CSS布局自适应等分比例

CSS等比例划分,在CSS布局中是比较重要的,下面分享几种常用方法和探讨一下兼容性. 一:浮动布局+百分比 emmet html代码:ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容} .float-ul{width: 100%; overflow: hidden; zoom: 1;} .float-ul li{float: left; width: 20%;} 该样式兼容性较好,但是无法实现当里面的列增多时比例也随着变化,必须手动修改,当然你也可以使用

CSS布局:水平居中

原文:CSS布局:水平居中 前言 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手.下面以分页组件为实例来记录各种实现方式. common.css <style type="text/css"> ul,li{list-style:none;margin:0;padding:0;} body{ background:#888; font-size:14px; color:#F2F2F2; text-shadow:1px 0 0

CSS布局(弹性盒模型)

一.弹性盒模型介绍 1.弹性盒模型介绍 — 基础知识 弹性盒模型( Flexible Box 或 Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐.方向.排序(即使在项目大小位置.动态生成的情况).弹性盒模型最大的特性在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局. *弹性容器(flex container) *弹性子元素(flex item) *轴分为主轴(main axis) 侧

一览css布局标准

回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CSS的作用就不是辅助展现了,变为全全负责展现.(注:当年CSS2的勘误表有兴趣可以看看) CSS2.1明确了2个模型,一个是众所周知的盒模型(Box model),CSS1没有盒模型的概念,盒模型的前身在CSS1里叫做面向盒的格式化模型.元素抽象为盒,以盒为对象设计思路清晰多了.CSS3的盒模型丰富了

忍者秘籍之css布局

css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(less),开发的效率确实变得越来越高效,但是可能有时候我们还是会对页面布局产生烦恼的情绪,比如:"咦?我想让它显示在这个部位,它一点都不听话啊".很大原因在于我们可能没对css布局这块做一个系统的梳理~,偶然间发现了Learn CSS Layout,在此分享给大家,希望和大家共同提高,另外