3.3 块元素 内联元素 内联块元素

元素就是标签,布局中常用的有三种标签,块元素 、内联元素、内联块元素

3.3.1 块元素

  块元素,也可以称为行元素,布局中常用的标签有:div \ p\ ul\ li \h1-h6\ dl\ dt\ dd等都是块元互;它在布局中的行为:

    a.支持全部的样式

    b.如果没有设置宽度,那么默认的宽度为父级宽宽的100%

    c.盒子占据一行,即使设置了宽度

3.3.2 内联元素

  内联元素,也可以称为行内元素,布局中常用的标签如:a  pan  em  b  strong  i等,它们在布局中的行为:

    a.支持部分样式(不支持宽、高、margin上下、padding上下)

    b.宽高由内容决定

    c.盒子并在一行

    d.代码换行,盒子之间会产生间距

    e.子元素是内联元素,你元素可以用text-align属性设置元素水平对齐的方式

3.3.3  解决内联元素间隙的方法

    a.去掉内联元素之间的换行

    b.将内联元素的父级设置font-size为0,内联元素自身再设置font-size

3.3.4 内联块元素

  内联块元素,也叫行内元素,是新增的元素类型,现有元素没有归于此类型;

原文地址:https://www.cnblogs.com/zijiang-4476/p/12148777.html

时间: 2024-10-13 21:00:17

3.3 块元素 内联元素 内联块元素的相关文章

web兼容学习分析笔记--块级、内联、内联块级元素

一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inline **和其他inline元素同行显示 **可以设置margin-left,margin-righ,padding-left,padding-right, **无效设置widht,height,margin-top,margin-bottom,padding-top,padding-bottom

块元素(block element)和内联元素

内联元素和块状元素能够用 display :block/inline   相互转换 块状元素变成内联元素的话,他的高就会失效而变为行高: 使用display:inline-block,让行内元素同时具有行内元素特性也能设置宽高 如果display:none的话,该元素就会不见 块状元素   address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldse

行内元素与块元素的区别,及常用块元素和常用行内元素

一.行内元素(内联元素)与块元素的区别 1.块元素独占一行,宽度默认100% 行内元素宽度都是它内容的的宽度 2.块元素默认情况可以设置宽度和高度 行内元素默认去.情况不能设置 3.块元素margin.padding上下左右都可以 行内元素只能margin.padding左右,不能上下 二.常用块元素和常用行内元素 1.常用块元素:div.p.form.ul.ol.li,h1,table等, 2.常见行内元素:a,span,em,strong,input,img等

HTML的块状、内联、内联块状元素的特点

元素分类及特点: 1.块级元素: 在html中<div>. <p>.<h1>.<form>.<ul> 和 <li>就是块级元素.设置display:block就是将元素显示为块级元素.块级元素特点: (1).每个块级元素都从新的一行开始,并且其后的元素也另起一行:(一个块级元素独占一行) (2).元素的高度.宽度.行高以及顶和底边距都可设置: (3).元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一

块级元素和行内元素的区别,常见的块级元素和行内元素有哪些

一般来说,html的元素分为两种,即块级元素和行内元素. 块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素. 行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素.行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制. 常见块级元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

块状元素居中、元素分类(块状,内联,内联块状)、内联转块状

块状元素中的文字.图片居中显示: CSS设置:text-align:center <style type="text/css"> div{text-align:center;} </style> </head> <body> <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 如图所

Selenium解决页面元素不在视野范围内的问题

当需要使用滚动条才能使页面元素显示在视野范围内时,必须用代码处理下,才能对其进行操作. 处理其实也很简单,就是调用JS函数. driver.executeScript("arguments[0].scrollIntoView(false);", e); 参数e 为WebElement 类型,方法executeScript是WebDriver中定义的方法.

java 判断元素是否在数组内

一,先转为List,再使用contains()方法 String[] strArr = new String[] { "a", "b", "c"}; String str = "c"; List<String> list = Arrays.asList(strArr); boolean result = list.contains(str); System.out.println(result); // true

css中内嵌,内联以及外联的区别

在学习css的过程中,经常会用到内嵌,内联以及外联这三种,接下来我就对于自己所学的一点介绍一下: 1.内嵌 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1 style="color:red;">