网站首页 > 技术文章 正文
CSS3的样式
语法:box-sizing: content-box | border-box | inherit;
content-box:表示浏览器绘制元素的时候宽和高只是内容的宽和高,不包含元素的padding和border大小,元素的实际高度还要加上padding和border设定的值
border-box:表示浏览器绘制元素的时候,实际宽度和高度的实际值为border值+padding值+内容的宽度/高度
inherit:从父窗口继承box-sizing属性
扩展
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
一般为了进行流布局好进行控制都会把元素的box-sizing设置为 border-box
* {
height: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
猜你喜欢
- 2024-11-24 六种设计难题的CSS实用技巧
- 2024-11-24 前端入门教程:CSS标准盒模型和怪异盒模型区别
- 2024-11-24 WEB前端-CSS盒子
- 2024-11-24 手把手教你css 中多种边框的实现小窍门【实践】
- 2024-11-24 纯CSS实现轮播图
- 2024-11-24 「干货」移动端Web页面适配
- 2024-11-24 《Web前端技术H5+CSS3》笔记--第六章 盒子模型「云图智联」
- 2024-11-24 深入浅出超好用的 CSS 阴影技巧
- 2024-11-24 掌握Flex布局的这几个常用属性,搞定弹性布局不在话下
- 2024-11-24 用 CSS Grid 布局制作一个响应式柱状图
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-