20190329-盒尺寸、boder-
目录
1、盒尺寸四家庭
width:宽度
height:高度
margin:外边距
padding:内边距
盒模型:
2、border边框
border简写:border-position(top | right | bottom | left)-styling(width | style | color )
border分样式:border-width(length | medium | thin | thick)
border-style(none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset)
border-color(color)
border-radius:(边框圆角)
border-image:(边框图片)
box-shadow:(盒子阴影)
内容
1、盒尺寸四家庭
1.1width:"auto | length";宽度
1.2height:"auto | length";高度
1.3margin:"auto | length";外边距
1.3.1简写:margin:"top right bottom left";"top left-right bottom";"top-bottom left-right";
1.3.2注意点:块级元素:上下重叠(外边距合并),左右不重叠;内联元素:没有上下,只有左右且左右不重叠
1.4padding:"length";内边距
待阅读完CSS世界再补充
2、border边框
2.1border简写:border-position(top | right | bottom | left)-styling(width | style | color )
border-left:
border-style:
border-top-style:dotted
2.2border分样式
2.2.1border-width:"length | medium | thin | thick";
2.2.2border-style:"none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset";
2.2.3border-color:"color";
2.3border-radius:(边框圆角)"[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4}";
/* 所有角都使用半径为10px的圆角 */
div{ border-radius:10px;}
/* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
div{ border-radius: 5px 4px 3px 2px; }
/*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开,第一个参数表示左上角开始顺时针的水平半径,第二个参数表示左上角开始顺时针的垂直半径*/
div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
/*圆*/
div{ border-radius:50% }
2.4border-image:(边框图片)"<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-outset '> ]? || <' border-image-repeat'>";(路径 | 内偏移 | 宽度 | 超出边框 | 是否平铺)
2.4.1border-image-slice内偏移:"number | % | fill";(数字 | % | 图像中间部分)
2.4.2border-image-outset超出边框:"length | number";(长度 | 代表对应的 border-width 的倍数)
2.4.3border-image-repeat是否平铺:"stretch | repeat | round";(拉伸 | 平铺 | 类似repeat,若无法完整平铺,则对图像进行缩放以适应区域)
2.5box-shadow:(盒子阴影):"h-shadow v-shadow blur spread color inset";
spread:阴影尺寸大小
inset:由outset改成inset
20190329-盒尺寸、boder-的更多相关文章
- css实现盒尺寸重置、均匀分布的子元素、截断文本
盒尺寸重置 重置盒子模型,以便width s和height s并没有受到border 还是padding他们的影响 . CSS文字折断 css实现盒尺寸重置.均匀分布的子元素.截断文本 如何对多行文本 ...
- 元素操作(sizing,尺寸获取,设值,偏移算法,坐标算法)
css3的Sizing Box-sizing是css3的box属性之一,遵循css的boxmodel原理,css中box model是分为两种,第一种是w3c的标准模型,另一种是ie的传统模型,他们相 ...
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- CSS盒模型-box-sizing
CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型 1.W3C的标准Box Model: /*外盒尺寸计算(元素空间尺寸)*/ Element空间高度 = cont ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- HTML5移动开发学习笔记之CSS3基础学习
CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...
- 常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩 ...
- 9_bootstrap less 移动端
chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备 android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工 ...
随机推荐
- 图解:HTTP 范围请求,助力断点续传、多线程下载的核心原理
题图:by Charles Loyer 一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header) ...
- 解放程序员双手之Supervisor
前言 对于大部分程序员来说,主要工作都是进行编码以及一些简单的中间件安装,这就导致了很多人对于“运维”相关的工作会比较生疏.例如当我们拥有一台自己的服务器以后,可能会在上面跑一跑自己blog程序, ...
- C# .NET Web API 如何自訂 ModelBinder
各位好!這次要來替大家介紹的是如何在 .NET Web API 中自訂一個 ModelBinder 透過自定義的 ModelBinder 我們可以很簡單的將 QueryString 傳過來的參數綁定 ...
- No Transport ,Network中看不到ajax请求
今天在调试一个后台的接口的时候,突然发现在network中找不到我发送的请求,也就是说,ajax没有在浏览器的network中没有显示.....第一次遇见这样的情况,很苦恼,然后使用ajax中的err ...
- Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考
背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞════════ ...
- 粮草先行——Android折叠屏开发技术点番外篇之运行时变更处理原则
上一篇文章中,我们有提到Activity在屏幕尺寸发生变更时的处理方式,总共有两种: 重启APP以适应屏幕改变: 手动处理数据,避免APP重启. 同样,这两种方式也同时适用于改变屏幕方向.更改系统语言 ...
- 如何购买并配置linux服务器上的数据库
首先百度搜索阿里云 如果是学生可以学生认证 然后注册账号->个人认证->学生认证 然后你会发现 服务器一年只要114,114你买不了上当,买不了吃亏,买下面的ECS服务器,系统可以选择wi ...
- IDEA创建applicationContext.xml 无法自动提示,文件图标是文本类型
问题:创建applicationContext.xml 的时候注册到file里边去了. 解决方法: 打开设置界面找到以下界面: 删除掉 Text 里边的 applicationContext.xml ...
- spring 【二】学习之spring EL
spring EL-spring 表达式语言,支持在xml和注解的形式,类似于JSP的el表达式的形式. 其主要使用@Value注解的结构形式 其主要功能 [1].注入普通字符串 [2].注入操作系统 ...
- Demo更新列表
Sdk 对应的demo ESF (1)ESF/ESFramework.EntranceDemo.rar (2)ESF/4.ESFramework.Demos.Ftp.rar (3)ESF/6.ESFr ...