就是块级元素。设置display:block就是将元素显示为块级元素。将内联元素a转换为块状元素表示为a{display:block;} 块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
在html中,、、
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),、标签就是这种内联块状标签。
内联块状元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
border-style(边框样式)常见样式有:dashed(虚线)| dotted(点线)| solid(实线)。
border-color(边框颜色)中的颜色可设置为十六进制颜色,如:border-color:#888;//前面的井号不要忘掉。
border-width(边框宽度)中的宽度也可以设置为:thin | medium | thick(但不是很常用),最常还是用象素(px)。
只设置下(上、右、左)边框的设置:
div{border-bottom:1px solid red;}
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:
div{padding:20px 10px 15px 30px;}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:
div{margin:20px 10px 15px 30px;}
如果上右下左的边界都为10px;可以这么写:
div{ margin:10px;}
如果上下边界一样为10px,左右一样为20px,可以这么写:
div{ margin:10px 20px;}
总结一下:padding和margin的区别,padding在边框里,margin在边框外。
流动模型
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
浮动模型
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img
等元素都可以被定义为浮动。(在设置完边框数据后设置浮动模型)
并排显示左对齐:float:left;
一左一右显示:#div1{float:left;}
#div2{float:right;}
并排显示右对齐:float:right;
层模型
层模型有三种形式:1、绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
(要向什么方向移动就输入多少距离就输入相反的方向和距离)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
Position fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。(想将层模型固定在什么位置就在Position
fixed后加上位置,默认是固定在左上角)
运用position:relative可以相对于其他元素进行定位。
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
行内元素怎么进行水平居中:
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )
当被设置元素为 块状元素 时用 text-align:center 就不起作用了。
定宽块状元素(定宽块状元素:块状元素的宽度width为固定值)
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
加入 table 标签
设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括
、、 )。 第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。 如下:html代码: css代码: 第二种方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。 html代码: css代码: 方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。 css代码: 设置垂直居中: 分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本。 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。 line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。 这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。 输入:.wrap{text-align:center;}表示垂直居中。
本文标签:
元素
标签
设置
块状
属性
更多相关文章
看如何在路由器上更改网络IP地址
看如何在路由器上更改网络IP地址
如何在路由器上修改网络IP地址
如何在路由器上修改网络IP地址
计算机属性安全选项卡,win10系统文件属性没有安全选项卡的图文办法
win10系统使用久了,好多网友反馈说win10系统文件属性没有安全选项卡的问题,非常不方便。有什么办法可以永久解决win10系统文件属性没有安全选项卡的问题,面对win10
电脑连不上网wifi,查看不了网络属性?解决办法,非常实用!亲测有效!
电脑连不上网? 首先检查你的驱动和网卡是否是好的,桌面----我的电脑------属性------设备管理器往下看 然后点右键就可以看得到驱动,以及网卡是否已启动!正常是要启动,驱动程序要最新! 如果这个没问题,那就打开电脑网络属性,
4.netsh wlan 查看无线网卡的属性?如何查看电脑支持WIFI5还是WIFI6?如何查看曾经电脑连过的WIFI密码呢?
目录 (1)netsh命令简介和用途 (2)netsh(针对网络接口)命令 1sh wlan set tracing mode=yes(开启无线追踪日志) 2sh wlan show drivers 查看电脑无线网卡属性(重点)支持
Windows7笔记本正版COA标签辨别
大多数朋友购买的本本都是预先装好操作系统的,这是获取正版操作系统最经济的途径之一。 通常在机算机的背部都会贴有COA(Certificate Of Authenticity)
使用a标签下载文件,浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案 背景一、HTML中的a标签实现点击下载二、即使使用a标签的download属性,chrome浏览器还是会打开三、解决方案解决方案一࿱
VUE浏览器打开新的标签页
let routesthis.$router.resolve({ name: "JumpOutSCM202", query: { productId: productId } });window.open(rout
360浏览器总是新建标签页怎么关闭?
360浏览器总是新建标签页怎么关闭?今天小编就给各位分享一下360浏览器去掉新标签页的方法,如果能碰巧解决你现在面临的问题,别忘了关注本站,下面一起来看
实体类中的属性名和表中的字段名不一样,怎么办?
我们使用idea通过右上角Database可以将数据库中的数据直接导入,点击此处有教程。 通过上面快速导入的方法idea会把mgr_id,mgr_name该字段,转变为mg
爬虫 Edge浏览器安装Xpaht Helper插件平替Chrome浏览器Xpaht Helper插件定位元素
爬虫 Edge浏览器安装Xpaht Helper插件平替Chrome浏览器Xpaht Helper插件定位元素 目录 爬虫 Edge浏览器安装Xpaht Helper插件平替Chrome浏览器Xpaht Helper插件定位元素1.概述2.
chrome浏览器不支持video标签,不能自动播放。
chrome浏览器不支持video标签,不能自动播放。 问题:chrome浏览器不支持video标签的autoplay属性,网页刷新后不能自动播放视频。 处理&#
在线查看html浏览器兼容性,HTML5标签、属性、事件及浏览器兼容性速查表分享
5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同, 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上&#
Android studio切换标签快捷键(Alt+左右键)
Android studio切换标签、内部切换页面快捷键(Alt左右键): Alt左箭头(←):选择上一个标
|