前端随心记---------HTML5+CSS系列4.0

盒模型

一、 盒模型的概念和组成

盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系; 

页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容(content)、内边距(补白,填充,padding)、边框(border)和外边界(margin)组成;

1) padding内填充

padding区域在border与content之间;

背景色和背景图像会覆盖padding和content组成的区域;

padding的使用方法

padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白(内填充)。

用法:

1)用来调整内容在容器中的位置关系

2)用来调整子元素在父元素中的位置关系。

注:padding属性可以添加在父元素上。

3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值。

属性值的4种方式:

四个值:上  右 下  左 {padding:10px  20px  30px  40px;}

三个值:上  左右  下    

二个值:上下  左右 

一个值:四个方向

说明:可单独设置一方向填充,

 margin(外边距/边界)的使用方法

边界:margin,在元素外边的空白区域,被称为边距。

外边距(margin)在border之外,margin区域不应用背景;

margin-left:左边界   margin-right:右边界

margin-top:上边界    margin-bottom:下边界

margin:0 auto;/*在浏览器中横向居中。 Margin可取负值

左右相加,上下重合(取大值)但如果两个盒子有浮动,上下就不重合了

盒模型的计算

边框设置{border:;}

说明

* 属性 1:边框样式

border-style:solid/dashed/dotted/double

solid:实线,dashed:虚线,

dotted:点状线,double:双线,

none :无边框, hidden:隐藏

*属性2: 边框粗细

border-width:取值;

*属性值3:边框颜色

border-color:取值;

简写:{border:style   width   color;}

写法:border-方向-属性:

例如:

border-top-style:取值;

border-top-width:取值;

border-top-color:取值;

哪些可以继承

内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.

块状元素可继承:text-indent和text-align。

列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承:border-collapse

原文地址:https://www.cnblogs.com/hudunyu/p/11421536.html

时间: 2024-11-09 00:52:17

前端随心记---------HTML5+CSS系列4.0的相关文章

前端随心记---------HTML5+CSS系列3.0

表单 u 表单的作用:用来收集用户的信息的; 表单框 : 表单 ?表单的作用:用来收集用户的信息的; 表单框 : <form name="表单名称" method="post/get" action="提交地址"> </form> <input type="text" value="默认值"/> 文本框 <input type="password"

前端随心记---------HTML5+CSS系列2.0

超链接的应用: 语法:    <a href="连接地址" title="提示信息" target=”属性值”> 链接文本/图片</a> 属性(名):target:页面打开方式 默认属性值:_self. I当前窗口 属性值:_blank 新窗口打开  <a href="#">空链接</a>  HTML标记的语法是 1.双标记: <标记(签)名称 属性1名="属性1值" 属性

前端随心记---------vuejs基础学习3.0

watch ch 和cpmpute的区别: 1.watch 表示监听某个模型变量的状态变化.watch监视的东西多一些,computed所依赖的东西都写在一个函数里. 2.特殊场景:如果业务出现了异步操作(回调函数)则这个时候computed是存在返回值,不能在使用,但是watch里面的没有返回值的概念,可以进行异步代码的调用. 小案例代码: <script type="text/javascript"> var vm = new Vue({ el: '#box', dat

前端随心记---------Javascript系列(第八节.BOM)

BOM: browser object model 浏览器对象模型 window 对象的子对象,也是属性 window document:浏览器是代表html的文档对象. history location: url对象 screen navigator window对象的常见属性和方法: 三个弹出框(内置方法,特点: 都会阻塞浏览器代码执行); alert( ); 弹出框 confirm( ); 确认框 prompt( ); 输入框 两个定时器; setInterval( ); setTimeo

前端随心记---------Javascript系列(第九节.DOM)

DOM document object model 对象: 属性 .事件 .方法节点: html : 是dom模型的根节点 所有的html标签都叫 元素节点 nodeType=1 所有的标签的属性叫做 属性节点 nodeType=2 所有的标签内容叫做 文本节点 nodeType=3 注:: 8表示的注释节点 9表示的根节点 一切都是节点 tagName 标签名称 nodeName 节点名称 nodeType 节点类型 nodeValue 节点对象的文本内容,是一个字符串. 节点关系 obj.o

前端随心记---------Javascript系列(第十一节.事件event)

事件对象(event) 事件 : 对某个元素的某种操作 事件对象: 当触发某个事件,产生的对象.就是事件对象,event使用的前提,必须有事件操作 var e=e || event ; 坐标属性:pageX /pageY 相对于文档顶部和左侧的坐标 ie8为undefined;clientX /clientY 相对于document窗口的顶部和左侧的坐标,如果出现滚动条,pageY=clienY+页面滚动的距离offsetX /offsetY 相对于操作的元素内部偏移量 var disx=e.o

前端随心记---------RPA系列(一)

RPA Robotic Process Automation 机器流程自动化 简而言之:就是虚拟劳动力 概念: RPA是智能化软件,可以理解为自动化机器人.只要预先设计好使用规则,RPA就可以模拟人工,进行复制.粘贴.点击.输入等行为,协助人类完成大量“规则较为固定.重复性较高.附加值较低”的事情. RPA产品形态: 当下的市场上存在三种RPA产品形态: 第一种是企业定制化的独立RPA软件,打开电脑点击即可使用: 第二种是应用于财会.金融等行业场景的平台化RPA产品,客户端包括图形化设计器.执行

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

前端随心记---------前海面试汇总

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.