盒子模型,定位技术,负边距,html5 新增标签

盒子模型

/*[margin 外边距]
margin属性最多四个
1、只写一个值,四个方向的margin均为这个值
2、写两个值:上,右两个方向,下默认=上,右 默认=左
3、写三个值:上、右、下三个方向,左默认=右
4、写四个值:上、右、下、左
5、写三个值+auto :控件居右显示
margin: 50px 30px 20px auto;距离浏览器:30px;
6、margin:0 auto;设置控件在父容器中水平居中
*/

/*[border 边框]
* border 有三个属性值:宽度width 高度height 样式style 颜色color
* 原则上,三个属性都需要手动指定(color不写时,默认黑色)
*/

/*【padding 内边距】
使用方式同margin 1-4
注意:使用padding时会将整个控件撑大,使用时注意控件可视区域的实际大小

* [border-radius 圆角]
* 1、可以接受8个属性值: X轴(左上、右上、右下、左下)/Y轴
* 例如:border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时,Y轴默认等于X轴。只写左上角,默认=右下角。只写右上角,默认=左下角
* 例如:border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数,默认8个值均相等。
*/
/* [box-shadow 盒子阴影]
* 1、六个属性值,空格分割:
* x轴阴影距离:(必选) 可正可负,正——右移 负——左移
* y轴阴影距离:(必选) 可正可负,正——下移 负——上移
* 阴影模糊半径:(可选) 只能为正,默认为0。数值越大,阴影越模糊
* 阴影扩展半径:(可选) 可正可负,默认为0。数值增大,阴影扩大。数值减小,阴影缩小
* 阴影颜色:(可选) 默认为黑色
* 内外阴影:(可选) 可选值:inset(内阴影) 默认为外阴影
*/

/*
clear:both清除float(浮动)产生的障碍*/

/*水平排放的盒子间距是magin的累加
垂直排放的盒子的间距取magin的最大值*/

/*父子盒子的垂直外边距合并:
给父盒子加:overflow="hidden"
给父盒子加: padding
给父盒子加:borer*/

/*设置盒子的盒模型为怪异模式 {只针对width宽度}
*{box-sizing:border-box}
width=border+padding+content(内容区)-width*/


/* [border-image 图片边框]
* 1、十个属性:
* ① 图片路径:url()
* ② 图片切片宽度:4个值,分别代表上、右、下、左,四条切线。
* 通过四条切线切割后,会把图片分成九宫格,四个角分别对应边框的四角(不会进行任何拉伸),
* 四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候,不能带px单位
* ③ 图片边框的宽度:4个值,分别代表上、右、下、左四条边框
* 写的时候,必须带px单位
* ④ 边框背景重复方式:stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺:会保持原有四条边的宽度,进行平铺。可能导致角落处无法显示完整一个图标;
* 铺满:会对四条边进行适当的拉伸压缩,确保可以正好显示完全。
*
* 2、属性值写法:border-image: ① ②/③px ④;(如果浏览器识别不了border前加一个-webkit-)
* 第②部分可以只写1个、2个、3个,判断方式同margin 上右下左
*
*/

定位技术

/* [相对定位 relative]
* 1、使用position: relative; 设置元素为相对定位的元素;
* 2、定位机制:
* ① 相对于自己原来文档流中的位置定位,当不指定top等定位值时,不会改变元素位置;
* ② 相对定位元素,仍会占据原有文档流中的位置,而不会释放。
* 3、使用top、left、bottom、right调整位置。当left和right同时存在,left生效,当top和bottom同时存在,
* top生效。
*/

/* [绝对定位 absolute]
* 1、使用position(位置): absolute;设置元素为绝对定位元素。
* 2、定位机制:
* ① 相对于第一个非static(静止)的祖先元素(即使用了relative/absolute/fixed
* 定位的祖先元素)进行定位。
* ② 如果所有祖先元素均为定位,则相对于浏览器左上角定位;
* ③ 使用absolute的元素,会从文档流中完全删除,原有空间释放不再占有;
*
* [固定定位 fixed]
* 1、position: fixed; 是一种特殊的绝对定位,父容器无法使用relative锁住
* 2、定位机制:永远相对于浏览器进行定位。
*
* [z-index (z轴的指数) 属性]
* 1、作用:设置定位元素的Z轴层叠顺序
* 2、使用要求:① 必须是定位元素才能使用。relative/absolute/fixed
* ② 使用z-index需要考虑父容器的约束。
* 如果父容器为z-index:auto,则子容器的z-index可以不受父容器的约束;
* 如果父容器z-index进行了设置,则子容器的层叠将以父容器的z-index为准
* (在同一父容器的不同子元素,仍可以通过自己的z-index调整层叠关系)。
*
* 3、z-index:auto & z-index:0 的异同:
* ① z-index:auto为默认值,与z-index:0处于同一平面。
* ② z-index:auto,不会约束子元素的z-index层次,而z-index:0,
* 会约束子元素必须与父元素处于同一平面。
*
* 4、z-index相同(处于同一平面的定位元素)的层叠关系:后来者居上

负边距

/*[实现块级元素在块级元素里水平垂直居中]
1、设置子容器为定位元素;
2、left: 50%;margin-left:width的一半
top: 50%;margin-top:heidth的一半*/

/*[使用负边距增大元素宽度]
1、不指定子容器宽度,指定高度或者填充内容;
2、margin: 0px -50px;可以使左右两边均超出父容器50px*/

html5 新增标签

<!-- 【HTML5 新增结构标签】
section:表示页面中的一个内容区块,文档的主体部分,用于将网页或文章划分章节、区块。
article:表示页面中的一块与上下文不相关的独立内容,例如博客中的一篇文章。
aside:表示article元素内容之外的,与article元素内容相关的辅助信息。(常用于相关推荐啊等)
header:网页或文章的头部。
footer:网页或文章的底部。
nav:表示页面中导航链接的部分
hgroup:用于整rmmethod:设置某个submit按钮,提交到指定的action地址,使用指定的method方法。 会覆盖form中的action和method属性
个页面或页面中一个内容区块的标题进行组合。
-->

<!--【HTML5表单属性】
Form:指向特定表单id,实现input无需放于form中,即可通过form提交;

Formaction/Fo
Placeholder:自动提示
Autofocus:自动获得焦点
Autocomplete:自动完成功能

详见 05_表单form.html 第8部分

List:指向指定的datalist的ID,为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)
>>>写法:<input type="text" list="data1"/>
<datalist id="data1">
<option>1234</option>
<option>2234</option>
<option>3234</option>
</datalist>
>>> 效果图:

maxlength:设置输入框的最大输入长度
-->

上一篇:java构造代码块详解


下一篇:C语言 百炼成钢7