html标签强制转换位置,王老师html零基础学习笔记第4课—

摘要：

前端0基础到这个时候常用的标签基本结束，涉及稍微“高级”点的标签div盒模型

样式初始化+元素类型转换+外边距合并

一、样式初始化

1. 清除浏览器默认样式,以免造成不必要的兼容问题

2. body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}

3. ol,ul{margin:0;padding:0;list-style:none;}

4. a{text-decoration:none;}

5. img{border:none;} /*清除ie图片边框*/

6.*{margin:0;padding:0;}

二.元素类型装换

(一). 什么是行级元素，什么是块级元素

块级元素会占据一行的位置,它后面的元素内容会换行显示,块级元素里面可以放任何内容,主要用来布局。

行级元素它只占据他内容所占的位置,其它的内容在他后面显示，但是行级元素里面不能放块级元素

1.常见块级元素

div h1-h6 ul li ol p from 等

2.常见行级元素等

(二).行块级元素有什么不同

1、块级元素会占一行显示，而行内元素可以在一行并排显示。

2、行内元素对于以下属性特殊化

1)设置宽度width 无效；

2)设置高度height 无效；

3)设置margin 只有左右margin有效，上下无效。

4)设置padding 只有左右padding有效，上下无效。

注：这里说的无效，指的是它对其它元素的排列没有影响。

也就是说，对于设置的margin,padding行内元素文档流里的上下元素来说，

他们的间距不会因为上下margin或者上下padding而产生间距。

但是就它本身而言，对于其他元素设置的上下margin与padding是有效的。

三).通过样式控制，行块级元素可以相互转换。

display:block：变成块级元素,还有显示的意思

display:inline：变成行级元素

display:none：不显示 , 它(包括它的子元素)将会被隐藏起来

display:inline-block：以行级元素形式排列，以块级元素样式显示

盒子模型外边距合并原则

1、外边距合并(垂直方向合并)

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

2、一个元素在另一个元素里面

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上或下外边距也会发生合并。

3、当盒子没有内容

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

如果这个外边距遇到另一个元素的外边距，它还会发生合并

html标签强制转换位置,王老师html零基础学习笔记第4课——样式初始化+类型转化...相关推荐

用html5代码打出一个王字,王老师html零基础学习笔记第6课——-font-size+特殊字符...
摘要: font字体设置在html里面是经常涉及到的,调整字体的大小属性,包括CSS样式的设置属性 css样式(font+text)+特殊符号一.color 控制字体颜色 1.十六进制值 #CC0 ...
html颜色王全透明,王老师html零基础课后练习第8课——圆角阴影hover
摘要: 在现在的网站产品介绍中,经常会出现把鼠标放在图片上就会显示出一段文字的介绍,这个是怎么使用的呢?一起来看看关于hover的使用,设置圆角和阴影今天要做的演示效果入选,就是很多网站上的产品都会 ...
SQL零基础学习笔记(一）
真的不知道我写了这么多不同的的学习笔记又没用..开始SQL零基础学习笔记百度百科:SQL(Structured Query Language)结构化查询语言,是一种数据库查询和程序设计语言,用于存取 ...
【Java】Java零基础学习笔记
文章目录前言思维导图前期准备卸载JDK 安装JDK Hello,world 可能遇到情况 java程序运行机制 IDEA的安装 java基础部分基础语法运算符包机制 javaDoc文档手 ...
Docker零基础学习笔记
零基础学习Docker Docker官方文档基础语法 docker pull: 从DockerHub上拉取镜像 $ docker pull ngnix Using default tag: late ...
python从入门到秃头_六星教育helen老师：零基础学习python，最好先掌握flask框架...
老夫掐指一算,距离农历过年不到80天啦! 敢问各位慌不慌. 过年可谓是苦乐相伴.一边是亲人团聚,全家团圆,每天睡到自然醒.一边是工资多少啊?结婚了吗?娃生了吗?二娃生了吗?三姑六婆的连环夺命问,逼着我 ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
零基础学习笔记 - ADF4159
目录 1.准备工作 1.1.前言 1.2.资料 1.3.介绍 1.4.应用 1.5.应用电路 2.ADF4159 2.1.功能框图 2.2.通信协议时序 2.2.寄存器 2.2.0.注意 2.2.1. ...
（Java零基础学习笔记）第二章 Java中的基本语法
前言: 大家好! 我是BA unravel .如果你想和我一起学习JAVA,欢迎大家一起来学习这个世界上最好的语言! 学习目标: 一周掌握 Java 入门知识学习内容: 1. 搭建 Java 开发环 ...

html标签强制转换位置,王老师html零基础学习笔记第4课——样式初始化+类型转化...

html标签强制转换位置,王老师html零基础学习笔记第4课——样式初始化+类型转化...相关推荐

最新文章

热门文章