css常用属性
标签的显示(display)模式
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素
1、块级元素(block-level)
常见的块元素有<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>等,其中<div>标签是最典型的块元素
块级元素的特点:
(1)自己独占一行
(2)高度,宽度,外边距以及内边距都可以控制
(3)宽度默认是容器的100%
(4)是一个容器及盒子、里面可以放行内或者块级元素。
注意:
只有文字才能组成段落 因此p里面不能放块级元素,特别是p不能放div
同理还有标签h1,h2,h3,h4,h5,h6,dt,都是文字类块级标签,里面不能放其他块级元素
- 行内元素(inline-level)
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等,其中<span>标签最典型的行内元素,有的地方也成为内联元素
行内元素的特点
(1)相邻行内元素在一行上,一行可以显示多个。
(2)高、宽直接设置时无效的。
(3)默认宽度就是它本身内容的宽度
(4)行内元素只能容纳文本或者其他行内元素。
注意
链接里面不能再放链接。
特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全。
- 行内块元素(inline-block)
在行内元素有几个特殊的标签 <img />,<input />,<td>,可以对它们设置宽高和对齐属性,称为行内块元素
行内块元素的特点
(1)和相邻内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个
(2)默认宽度就是它本身内容的宽度
(3)高度,行高,外边距以及内边距都可以控制。
4、三种模式总结与区别
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 他本身的内容 |
5、标签显示模式转换display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换行内块:display:inline-block;
边框样式(border-style):
border-style属性可以控制边框的视觉样式,包含8种可用边框样式。
使用方法:
8种样式:
solid: 实线边框,经典边框。
double: 双线边框,含有两条线。
groove: 槽线边框,看起来就像页面中的一个槽。
outset: 外凸边框,看起来就像从页面凸出来一样。
dotted: 虚线(点线)边框。
dashed: 破折线边框。
inset: 内凹边框,看起来像页面凹进去一样。
ridge: 脊线边框,看起来像页面上一个凸起来的山脊。
边框圆角(border-radius):
一般设置的边框默认样式都是90°的直角边框,利用border-radius属性可以设置边框四角的弧度。
使用方法:
1.用一个数字指定四个角的弧度大小。
border-radius: 15px;
首先我们要知道display是显示的意思,分别有四种属性值分别为:
display:block;(转换为块元素)
display:inline;(转换为行内元素)
display:inline-block;(转换为行内块元素)
display:none;(元素不会被显示)
前言
CSS 中的 padding 属性用于控制元素内容与其边框之间的距离,即元素内边距。
它的主要作用是调整元素内部内容与边框之间上右下左的间距,以增加页面的美观性和布局灵活性。
好,那我们一起来看看吧。
Padding 基础
padding 属性的四个边属性分别是:
padding-top:控制元素顶部内边距的大小,用于设置元素上边距的间距。
padding-right:控制元素右侧内边距的大小,用于设置元素右边距的间距。
padding-bottom:控制元素底部内边距的大小,用于设置元素下边距的间距。
padding-left:控制元素左侧内边距的大小,用于设置元素左边距的间距。
margin 的使用
margin 用于设置元素的外边距。
margin 是一个简写属性,包括以下 4 个子属性:
margin-top:上外边距。
margin-right:右外边距。
margin-bottom:下外边距。
margin-left:左外边距。
margin 可以设置 1 ~ 4 个属性值:
一个属性值:一起设置上下左右。
两个属性值:分别设置上下、左右。
三个属性值:分别设置上、左右、下。
四个属性值:分别设置上右下左。
margin 的值可以是以下几种:
<length>:使用一个有单位的长度值。可以使用负值。
<percentage>:使用一个百分比值。相对于元素的包含块的宽度。
auto:让浏览器自动计算外边距的大小,通常用于设置块级元素水平居中或平均分配空间。
inherit:继承父元素的外边距。
CSS3:overflow属性详解
overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来;
如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto;
overflow:auto 属性如果超出就出现滚动条,没有超出则不出现滚动条这样就可以出现滚动条,
滚动条也可以单独设置,例如overflow-x:hidden;overflow-y:auto;这样就只能看见垂直方向的滚动条了。如果单独定义x轴或者y轴的时候,两个属性都需设置属性值
- 添加overflow:hidden;属性,效果:
可以看到,overflow:hidden会把超出盒子的部分隐藏,也可以理解为切断。
- 添加overflow-x:hidden;overflow-y:auto属性
属性设为overflow-x:auto;overflow-y:hidden;与上图效果正好相反,即滚动条侧边隐藏,会出现在底部。
2.overflow的常见属性值
Overflow属心常见的有四个:visible,hidden,auto和scroll;
visible为overflow 的默认值,为超出显示;
hidden为超出隐藏;
auto为自动,即超出会出现滚动条, 不超出就没有滚动条;
scroll为内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。