CSS块级元素和行内元素
1. 宽高
width:数值;
height:数值;
也可用百分比!
长高的设置不会被后代继承
2. 背景
(1)背景颜色
background-color:颜色值;
元素的背景颜色默认为transparent
background-color 不会被后代继承。
(2)背景图片
使用background-image 属性默认值为none 表示背景上没有放置任何图像
如果需要设置一个背景图像,必须为这个属性设置一个url 值
background-image: url(bg.gif);
注意图片的位置引入方法!
背景图片重复的问题
使用background-repeat 来解决,可以的值:repeat-x,repeat-y,no-repeat
背景图片的位置
使用background-position 来设置
1>可以使用一些关键字:top、bottom、left、right 和center 通常,这些关键字
会成对出现。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
2>也可以用百分比
background:50% 50%;
第一个表示水平第二个表示垂直
3>当然更可以用数值,以px 单位
background:40px 10px;
第一个表示水平第二个表示垂直
4>也可以混用!
背景关联
background-attachment:fixed
(3)总结写法
background: #00FF00 url(bg.gif) no-repeat fixed center left;
3. 边框
border:1px solid #ccc;
dashed 表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分开设置
最后来讨论一个有趣的问题:
后代元素长度大于祖辈元素的大小时候的处理方法:
overflow:;
可能的值:
visible:默认,内容不会被修剪,会呈现在元素框之外。
hidden:超出的内容会被修剪掉,直接不现实。
scroll:超出内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被超出,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承overflow 属性的值。
一、块级元素:block element
每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;
块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。
DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。
二、行内元素:inline element
也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。
三、block(块)元素的特点
①、总是在新行上开始;
②、高度,行高以及外边距和内边距都可控制;
③、宽度缺省是它的容器的100%,除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
四、inline元素的特点
①、和其他元素都在一行上;
②、高,行高及外边距和内边距不可改变;
③、宽度就是它的文字或图片的宽度,不可改变
④、内联元素只能容纳文本或者其他内联元素
对行内元素,需要注意如下
- 设置宽度width 无效。
- 设置高度height 无效,可以通过line-height来设置。
- 设置margin 只有左右margin有效,上下无效。
- 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
五、常见的块状元素
- address – 地址
- blockquote – 块引用
- center – 举中对齐块
- dir – 目录列表
- div – 常用块级容易,也是CSS layout的主要标签
- dl – 定义列表
- fieldset – form控制组
- form – 交互表单
- h1 – 大标题
- h2 – 副标题
- h3 – 3级标题
- h4 – 4级标题
- h5 – 5级标题
- h6 – 6级标题
- hr – 水平分隔线
- isindex – input prompt
- menu – 菜单列表
- noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
- noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
- ol – 有序表单
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 无序列表
六、常见的内联元素
- a – 锚点
- abbr – 缩写
- acronym – 首字
- b – 粗体(不推荐)
- bdo – bidi override
- big – 大字体
- br – 换行
- cite – 引用
- code – 计算机代码(在引用源码的时候需要)
- dfn – 定义字段
- em – 强调
- font – 字体设定(不推荐)
- i – 斜体
- img – 图片
- input – 输入框
- kbd – 定义键盘文本
- label – 表格标签
- q – 短引用
- s – 中划线(不推荐)
- samp – 定义范例计算机代码
- select – 项目选择
- small – 小字体文本
- span – 常用内联容器,定义文本内区块
- strike – 中划线
- strong – 粗体强调
- sub – 下标
- sup – 上标
- textarea – 多行文本输入框
- tt – 电传文本
- u – 下划线
七、行内元素与块级元素有什么不同?
区别一:
块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二:
块级:块级元素可以设置宽高
行内:行内元素不可以设置宽高
区别三:
块级:块级元素可以设置margin,padding
行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四:
块级:display:block;
行内:display:inline;
可以通过修改display属性来切换块级元素和行内元素
CSS块级元素和行内元素相关推荐
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...
- [HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- css块元素与行内元素特点,CSS区分块级元素和行内元素
块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...
- CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方. 默认情况下块元素,是独占一行的 常见 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
- CSS中块级元素,行内块元素,行内元素的特点
CSS自学笔记 目录 一.什么是元素显示模式 二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素 前言 网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
- Web前端,CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言 持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素 特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
最新文章
- 5个java框架及其优缺点_各种Java Web框架的优缺点是什么?
- DCCI:Web3.0时代 微博未来有望突破4.6亿
- MOSS007 服务器的配置
- hdu6438 Buy and Resell 买卖物品 ccpc网络赛 贪心
- 【深度学习】非极大值抑制Non-Maximum Suppression(NMS)一文搞定理论+多平台实现...
- (5)ZYNQ FPGA中断介绍
- [20170220更新]移动多媒体时代,简书产品该如何演化
- BZOJ 3098: Hash Killer II(新生必做的水题)
- Makefile的基本规则实例说明
- Qt之Dialog\widget\ mainwindow的区别和布局管理器 分裂器的区别
- STM32固件库官方下载地址
- 在线工具(eda/画图[visio替代]/公式编辑/公式识别)
- 腾达u6无线网卡 linux,腾达u6免驱版驱动下载
- 测试声音软件贴吧,免费声音相似度测量软件Sound-Similar Free
- 《智慧政府之路:大数据、云计算、物联网架构应用》
- 矩阵和向量的范式(Norms for Vectors and Matrices)
- Smartbi的使用
- 【博闻强记】eclipse背景色的更改
- canvas将彩色图片变为灰度图片理解问题
- 【布局优化】基于粒子群求解物流选址matlab源码
热门文章
- UVA11464偶数矩阵
- LA3403 天平难题
- hdu2102 水搜索
- 【C 语言】数组 ( 指针退化验证 | 计算数组大小 | #define LENGTH(array) (sizeof(array) / sizeof(*array)) )
- 【OkHttp】OkHttp 上传图片 ( 获取 SD 卡动态权限 | 跳转到相册界面选择图片 | 使用 OkHttp 上传图片文件 )
- 【数据挖掘】数据挖掘算法 组件化思想 示例分析 ( 组件化思想 | Apriori 算法 | K-means 算法 | ID3 算法 )
- 【设计模式】适配器模式 ( 类适配器代码模板 | 对象适配器代码模板 | 适配器模式示例 )
- 动态生成RadialMenuContainer
- 病毒木马防御与分析实战
- 使用Filter跟踪Asp.net MVC页面加载(转)