首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSS样式块级元素,行内元素,行内块级元素

前言 HTML元素按布局属性可以分为三种类型:块级元素、行内元素、行内块元素 这篇文章梳理一下他们区别与联系 一、区别 1.块级元素 属性 默认独占一行 如果设置宽度,默认是父级宽度。...即使设置宽度,也会占用一行 可以设置全部属性 2.行内元素 属性 不会独占一行,可以与其他非块级元素同行 不是全部属性都生效。margin上下,padding上下,宽度,高度都不可以设置。...宽度随元素内容大小而变化。 代码换行时,会出现间隔。解决方案:父元素设置font-size为0,子元素再设置具体字体大小。...解决方案:父元素设置font-size为0,子元素再设置具体字体大小。...二、联系 可以通过cssdisplay属性来转换 block 块级元素 inline 行内元素 inline-block 行内块级元素 display: block; // 设置元素为块级元素

2K30

css样式颜色格式

颜色对于 css 来说是非常重要,网站之所以会呈现出五彩斑斓样式,就是这些颜色样式作用。在 css ,对于颜色样式有很多种表达方式,今天我们就来盘点下 css 颜色格式。...名字颜色 在 css ,默认定义了很多名字颜色,比较常见比如 yellow,blue,red,pink 等,实际上,css 中一共定义了 140 个颜色名字,这些名字你都可以直接拿来使用。...虽然 140 种看起来很多,但是实际上它比 8bit 颜色还要少,因此,平时我们很少使用它。...在 css ,red,green,blue 被称作三通道,每个通道值是从 0-255,通过混合这些通道颜色,我们就可以创造出 1600 多万种颜色。...因此,使用 P3 时候,需要使用特殊属性值 color 形式来表示,但是对于 color 这个属性,目前只有 safari 支持。

2.2K30

CSS样式使用

标签选择器使用 HTML网页是由很多标签组成,例如图像标签、超链接标签、表格标签,CSS标签选择器就是声明页面哪些标签使用哪些CSS样式。...id选择器是通过HTML页面id属性来选择增添样式,与类别选择器基本相同,但是由于HTML页面不能包含两个相同点id标记,因此定义id选择器也就只能被使用一次。... 运行结果: 内嵌式 内嵌式样式就是在页面中使用标记将CSS样式包含在页面,内嵌式样式形式没有行内标记表现直接,但是能够使页面更加规整...,将CSS样式定义在一个单独文件,然后再HTML页面通过标签引用,是一种最为有效使用CSS样式方式。...>标签将CSS样式表引入到页面,此时CSS样式表定义内容将自动加载到页面

1.1K50

CSS设置鼠标样式

大家好,又见面了,我是你们朋友全栈君。 cursor规则是设定网页浏览时用户鼠标指针样式,也就是鼠标的图形形状 所有主流浏览器都支持 cursor 属性。...该属性定义了鼠标指针放在一个元素边界范围内时所用光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。...默认值: auto 继承性: yes 版本: CSS2 JavaScript 语法: object.style.cursor=”crosshair” 可能值 值 描述 default 默认光标(通常是一个箭头...e-resize 此光标指示矩形框边缘可被向右(东)移动。 ne-resize 此光标指示矩形框边缘可被向上及向右移动(北/东)。...使用方法 .span { cursor:pointer //设定鼠标的形状为一只伸出食指手,这也是绝大多数浏览器里面鼠标停留在网页链接上方时候样式 } .span { cursor:

2.7K10

CSSCSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...CSS 文本样式 : 文本颜色 : color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 : 预定义颜色 : 直接使用 颜色英文名称 , blue , red , green...标签 单元格 标签 ; 行内块元素特点 : 显示样式 : 行内块元素 默认 都在一行显示 , 每个元素之间会自动添加间隔 ; 宽高设置 : 行内块元素 默认宽高 是 元素本身宽高...转换为 块级元素 */ display: block; } 行内元素 -> 块级元素 : 在 CSS 样式设置属性值 display: inline; , 可以 将 块级元素...: 在 CSS 样式设置属性值 display: inline-block; , 可以 将 块级元素 或 行内元素 转换为 行内块元素 ; div { /* 块级元素

21810

CSS元素基本使用

CSS元素基本使用 上一篇文章介绍了很多个伪类使用,这篇来说一下伪元素。 伪元素之所以称为“伪”,主要是因为它不是真正网页里元素,但是标线行为又跟真正网页元素一样,也可以对其使用css操作。...: '*'; color: red } 二、::before 略 三、::cue 匹配所选元素WebVTT提示。...这可以用于在VTT轨道媒体中使用字幕和其他线索。多使用在视频文本显示上。...四、::first-letter 修改块级元素第一行第一个字母,比如你经常看到故事书中第一个文字是大写,就可使用它在页面上做对应设置 五、::first-line 用在块级元素第一行 六、...模板 元素,这对于我们现在使用框架而不是再自创标签用户来说,很少会用到

93600

【网页前端】CSS样式表之元素显隐

本期介绍 本期主要介绍CSS常用布局之定位 文章目录 1. 引言&概述 2. display 设置(回顾) 3. visibility 设置 4. overflow 设置 5. 总结 1. ...引言&概述 在网页特效,经常涉及到元素显示和隐藏切换,所以我们要系统学习元素显隐相关操作。...元素显隐:利用 CSS 属性控制元素在页面显示和隐藏 共有三种方式: display visibility overflow 2. display 设置(回顾) display...3. visibility 设置 visibility 属性可以使得元素 在显示和隐藏之间相互转换。 注意:若使用该属性隐藏元素,隐藏元素仍然会占用原有标准流位置。...格式: 选择器 {visibility: 属性值 } 准备代码: 常用属性值: 适用于:即使隐藏,也要占用位置需求 4. overflow 设置 overflow: 用于设置溢出元素部分策略

77230
领券