盒子模型

1.margin和padding1个参数指上下左右距离；2个参数指上下，左右；3个参数指上，左右，下；4个参数为上右下左，顺时针方向。
2.外间距居中，可用auto。
3.盒子真实宽度：width + 左右padding + 左右border；盒子真实高度：height + 上下padding + 上下border。

列表

1.无序列表：

<ul><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li>
</ul>

2.有序列表：

<ol><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li>
</ol>

表单

1.form标签：定义整体的表单区域
action属性：定义表单数据提交地址
method属性：定义表单提交的方式，一般有“get”方式和“post”方式

2.label标签：为表单元素定义文字标注

3.input标签：定义通用的表单元素
type属性

属性	描述
text	定义单行文本输入框
password	定义密码输入框
radio	定义单选框
checkbox	定义复选框
file	定义上传文件
submit	定义提交按钮
reset	定义重置按钮
button	定义一个普通按钮

value属性：定义表单元素的值
name属性：定义表单元素的名称，此名称是提交数据时的键名

4.textarea标签：定义多行文本输入框

5.select标签：定义下拉表单元素

6.option标签：与select标签配合，定义下拉表单元素中的选项

表格

1.table标签：声明一个表格

2.tr标签：定义表格中的一行

3.td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格;

css权重值

1.内联样式的权重值最高: 1000 (内联: 写在标签上的样式)
2.标签选择器的权重值为最低: 1
3.类选择器的权重值为: 10 ( 了解 )
4.伪类选择器权重值为: 10 ( 了解 )
5. id 选择器的权重值为: 100
标签会选择权重值较高的css样式

定位(positon)

都使用left,right,top,bottom属性调整偏移量。
1.相对定位(relative)：在文档流中还占有原来位置，以原位置为参照物进行偏移。

2.绝对定位(absolute)：设置为绝对定位的元素框从文档流中完全脱离，不占有原来的位置，性对于最近的父类为参照物定位，如果父类没有进行定位，则以body为参照物。

3.固定定位(fixed)：对象脱离正常的文档流，以窗口为参照物进行定位，不会随滚动条移动而移动。

4.元素层级(z-index)：绝对定位元素是浮动在正常的文档流之上的，可以用 z-index 属性来设置元素的层级。z-index值大的显示在最上面。

页面嵌套

在一个页面中可以开一个局部的窗口，嵌入另外一个页面，可以使用iframe标签来实现这个功能。

<iframe src="001.html" frameborder="0" framename=”mainframe”></iframe>

参数	描述
src	页面地址
frameborder	局部窗口的边框粗细

target：
_blank：新开一个浏览器窗口显示链接页面
framename：连接的框架的name

HTML/CSS进阶相关推荐

《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
(11/24) css进阶：Less文件的打包和分离
(11/24) css进阶:Less文件的打包和分离写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展 ...
前端开发注意事项(HTML与CSS进阶)
HTML 与 CSS 进阶 Img 标签 alt 属性一定要添加用于图片描述给机器看的,如果图片加载失败,会显示 alt <img src="" alt="& ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...
CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
【前端学习】D3：CSS进阶
文章目录前言系列文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级(*) 2 盒子模型 2.1 看透网页布局的本质 2.2 盒子模型(Box Model)的组成 2.3 ...
CSS进阶-盒子与动画
CSS进阶-盒子与动画文章目录 CSS进阶-盒子与动画前言 Chapter04 CSS3动画 1. Animation动画 1.1 关键帧 1.2 定义关键帧 1.2.1 定义示例 1.2.2 效 ...
HTML与CSS进阶
目录一.HTML进阶 1. HTML5.XHTML和HTML 2. id属性和class属性 3. 浏览器标题栏小图标 4. 图片语义化 5. fieldset 标签和 legend 标签 6. 列 ...
CSS进阶（P66-P86）
能够使用复合选择器在 HTML 中选择元素,能够使用 Emmet 语法提高编码速度,能够使用 hover伪类选择器设置标签的鼠标悬停状态,能够使用背景相关属性装饰元素的背景样式,能够认识三种 ...

HTML/CSS进阶

盒子模型

列表

表单

表格

css权重值

定位(positon)

页面嵌套

HTML/CSS进阶相关推荐

最新文章

热门文章