文档章节

css3 box-sizing:border-box 实现div一行多列

qimh
 qimh
发布于 06/25 19:11
字数 125
阅读 4
收藏 0
点赞 0
评论 0
<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
  background:green;
  padding:10px 10px;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:33.33%;
border:2px solid red;
float:left;
}

div.container:after{
	display:block; 
	content:"."; 
	height:0; 
	clear:both; 
	overflow:hidden; 
	visibility:hidden;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>

</body>
</html>

参考链接:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

© 著作权归作者所有

共有 人打赏支持
qimh
粉丝 8
博文 294
码字总数 54650
作品 0
滁州
程序员
CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷
2015/09/16
51
0
Border box-sizing resize

box-sizing,这个属性可以定义元素盒子的解析方式,从而可 以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。 //设置 border-box 让 border 和 padding 不在额外增加元素大小 asid...

菜鸟不菜么
05/01
0
0
WEB前端学习面试:用CSS画一个等边三角形

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/30
0
0
CSS3中的box-sizing属性

box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,元素的高度和宽度的计算方法也不同。 在默认情况下,设置的和属性都是指元素内容(content box)...

4fun
2017/10/28
0
0
提升你设计水平的CSS3新技术

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度...

晨曦之光
2012/03/09
0
0
子div自适应父级元素剩余空间

以如下问题为例,给出两种解决方案: 问题:一个div占据浏览器整个视窗,内部一div宽高固定时,如何实现另一内部div自适应剩余空间? <div class="farther-panel"> <div class="childA-cls">...

海礁
2017/10/21
0
0
解决给父级div设置padding让子级元素居中的问题

在做网页过程中,我们常常会遇到让子级块状div居中的问题,如下图 css3_padding1.png 代码 我们想让这个蓝色的小块水平垂直居中,不考虑其它方法,只用padding的方式,设置padding值,让它可...

爱前端的小白
2017/07/06
0
0
input搜索框+button按钮 之 content-box 和 border-box

恍然大悟又 --可以用CSS3的box-sizing来设置下文中的"正常盒子"和"不正常盒子/怪异盒子" 正常盒子 box-sizing:content-box 不正常盒子 box-sizing:border-box; 缘由 我们经常要写一个的搜索框...

boogoogle
2016/05/21
273
0
css3 marquee

HTML结构如下: 原本一层DIV足够,又加了一层是为了增加左右的空白间隙。 然后就可以应用transform动画了: 方案源于stackoverflow:css3-marquee-effect...

一点灵犀
2016/07/18
122
0
css3简单知识学习

CSS3简单学习 倾斜div div { transform:rotate(30deg); } css3圆角边框 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; / Old Firefox / } 边框阴影 div { box-shad......

writeademo
2016/08/02
16
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tomcat虚拟路径的几种配置方法

tomcat虚拟路径的几种配置方法 一般我们都是直接引用webapps下面的web项目,如果我们要部署一个在其它地方的WEB项目,这就要在TOMCAT中设置虚拟路径了,Tomcat的加载web顺序是先加载 $Tomcat_ho...

Helios51
11分钟前
1
0
Mac 安装jupyter notebook的过程

MAC台式机 python:mac下自带Python 2.7.10 1.先升级了pip安装工具:sudo python -m pip install --upgrade --force pip 2.安装setuptools 工具:sudo pip install setuptools==33.1.1 3.安装......

火力全開
17分钟前
0
0
导航守卫解释与例子

“导航”表示路由正在发生改变。 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住...

tianyawhl
17分钟前
0
0
Java日志框架-logback配置文件多环境日志配置(开发、测试、生产)(原始解决方法)

说明:这种方式应该算是最通用的,原理是通过判断标签实现。 <!-- if-then form --> <if condition="some conditional expression"> <then> ... </then> </if> ......

浮躁的码农
31分钟前
1
0
FTP传输时的两种登录方式和区别

登录方式 匿名登录 用户名为: anonymous。 密码为:任何合法 email 地址。 授权登录 用户名为:用户在远程系统中的用户帐号。 密码为:用户在远程系统中的用户密码。 区别 匿名登录 只能访问...

寰宇01
32分钟前
0
0
plsql developer 配置监听(不安装oracle客户端)

plsql developer 配置监听(不安装oracle客户端)

微小宝
40分钟前
1
0
数据库(分库分表)中间件对比

本人的宗旨就是,能copy的,绝对不手写。 分区:对业务透明,分区只不过把存放数据的文件分成了许多小块,例如mysql中的一张表对应三个文件.MYD,MYI,frm。 根据一定的规则把数据文件(MYD)和索...

奔跑吧代码
43分钟前
2
0
Netty与Reactor模式详解

在学习Reactor模式之前,我们需要对“I/O的四种模型”以及“什么是I/O多路复用”进行简单的介绍,因为Reactor是一个使用了同步非阻塞的I/O多路复用机制的模式。 I/O的四种模型 I/0 操作 主要...

hutaishi
50分钟前
1
0
【2018.07.16学习笔记】【linux高级知识 20.16-20.19】

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

lgsxp
55分钟前
0
0
用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛 前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为...

ssthouse_hust
59分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部