css属性和属性值，溢出属性，css盒子
2024-04-29 11:53:06
1、css属性和属性值
1.css文本属性
1. font-size 字体大小 单位是px，浏览器默认的是16px，设计图常用的是12px 2. font-family 字体 当字体是中文字体，英文字体中有空格时，需要加双引号；*** **多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体以此类推 支持字体：宋体 黑体 微软雅黑 微软正黑体 新宋体 新细明体 细明体 标楷体 仿宋 楷体 仿宋_GB2312 楷体_GB2312 3.color 颜色 color:red; color:#ffffff; 十六进制 前两位是红色，中间绿色，最后蓝色color:rgb(0.0.0) 红.绿.蓝 0-255 0最弱255最强 4.font-weight 加粗 font-weight:ligter（细体） bolder（更粗的）强调作用/bold(加粗)/normal（常规）；font-weight:100-900;100-500不加粗 600-900加粗常用：100细体 400正常 700加粗 900更粗体（强调作用） 5.font-style 倾斜 font-style:italic(斜体字)/oblique（倾斜的文字）强调作用/normal(常规显示) 6.text-align 文本水平对齐 text-align：left;水平靠左text-align:right;水平靠右text-align:center;水平居中text-align;justify;水平两端对齐，但只对多行起作用 7.line-height 行高 line-height的数据=height的数据，可以实现单号文本垂直居中多行文本无法实现文本垂直居中 8.text-indent 首行缩进 text-indent可以取负值； text-indent属性只对第一行起作用取值px/em<相对于此时字体大小> 9.letter-spacing 字间距 控制文字和文字的间距 文本间距：词间距，字符间距。单位px词间距：word-spacing 单词与单词之间的间距 取负值就交叉了 10.text-decoration 文本修饰 text-decorat:none没有/underline下划线/overline上划线/line- through删除线既有上划线，又有下下划线，还有删除线text-decoration：underline overline line-through 11.font 文字简写 font是font-style（倾斜）font-weight（加粗）font-size（字体大小）line- height（行高）font-family（字体）的简写.例： font:italic 800 30px/80px "宋体" ******************** 顺序不能改变；必须指定font-size（字体大小）和font-family（字体）属性时才能起到 作 12.文本属性-检索大小写 text-transform: capitalize首字母大写 lowercase;字母全部小写 uppercase全部大写 none没有设置
2.css列表属性
1.list-style-type 定义列表符和样式 list-stule-type:disc(实心圆)/circle（空心圆）/square（实心 方块）/none（去掉符号） 2.list-style-image 将图片设置位列表符合样式 list-style-image:url(); 3.list-style-position 设置列表标记放置位置 list-style-position:outside;列表的外面默认值list-style-position:inside;列表的里面控制实心圆，图片等在列表内外 4.list-style 简写 list-style:none;去除列表符号 5.合并写法 list-style:(列表符样式) （图片设置） （列表标记放置位置）;顺序随便换例如：list-style: none url(1.png) outside
3.css背景属性
1. background-color 背景颜色 background-color:red; 2. background-image 背景图片 background-image:ur(图片地址); 图片较大自动裁剪放置，图片小会自动 复制平铺 3. background-repeat 背景图片的平铺 background-repeat:no-repeat不平铺/repeat默认平铺/repeat- x在x轴平铺/repeat-y在y轴平铺; 4. background-position 背景图片的定位 background-position:水平位置 垂直位置;可以给负值background-position:20px 30px 距离左边20px 距离上边30pxbackground-position:10% 20% 宽的10% 高的20%background-position:left center right 左 中 右top center bottom 上 中 下 5. background-attachment 背景图片的固定 background-attachment:scroll(滚动)/fixed(固定，固定在 浏览器窗口里，固定之后就相对于浏览器窗口了)fixed 相对于窗口 与盒子无关了，相对于左上角 6.背景图片的大小 background-size:400px 400px 宽 高100% 100% 宽 高cover 将背景图扩展到足够大或小，以使美军图像完全覆盖背景区域，不会使 图片失真，不会留白contain 将图片扩展至最大/最小尺寸，以使其宽度和高度完全使用内容区 域。铺不满盒子，会留白 7.背景的复合属性复合写法 例：background：red（红色） ur() no-repeat center fixed;1.用空格隔开 2.顺序可以换 3.可以只取一个值，放在后面的值能覆盖前面的值bakground-size属性只能单独用
4.浮动属性
让div可以横向排列 1. float:left; 让元素靠左边浮动 2.float:right; 让元素靠右边浮动 3. float:none; 元素不浮动 浮动的作用：1.定义网页中其他文本如何环绕该元素显示2.让竖着东西横着来如果都是浮动的会按照平级排列全部左浮动，从左到右按顺序排列，右浮动，从右到左按顺序排列浮动文字不会被挡住，会围绕显示
清除浮动 1. clear:none; 允许有浮动对象 2. clear:right; 不允许前面有右边有浮动对象 3 clear:left; 不允许前面有左边有浮动对象 4. clear:both; 不允许前面有浮动对象 清除浮动只是改变元素的排列方式，该元素换上扶着，不章句文档位置。 ******************当前元素后面不一个盒子设置清除浮动，不设置宽高 clear:both;overflow:hidden;能实现内部子标签不影响后面内容bfc，让浮动元素计算高度
浮动自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
1. 给父元素添加声明overflow:hidden(缺点：会隐藏溢出的元素)
2. 在浮动元素下方添加空元素，并给该元素添加声明：clear:both;height:0;overflow:hidden;(缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能)
3. 万能清除浮动：选择器：after{contert:"";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden; }
2、溢出属性
1.溢出属性
1.溢出属性（容器的） 说明： overflow:visble/hidden(隐藏)/scroll/auto自动/inherit; visble：默认值，溢出内容会显示在元素之外； hidden：溢出属性隐藏；文本裁剪 scroll：滚动溢出内容一滚动方式显示；不溢出也会出现滚动条 auto：如果有溢出属性会添加滚动条，没有溢出正常显示； inherit：规定应该遵从父元素继承overflow属性的值 overflow-x：x轴溢出怎么处理； overflow-y：y轴溢出怎么处理
2.空余空间
说明： white-space:normal/nowrap/pre/pre-wrap/pare-line/inherit 该属性用来设置如何处理元素中的空白； normal:默认值，空白会被浏览器忽略。 nowrap:文本不会换行，文本会在同一行上继续，知道遇到<br>标签为止； pre：预格式化文本-保留空格 tab，回车 但不会自动换行/* 可以用<pre></pre>直接写 */ pre-wrap:会折行但会保留空格 pre-line:只显示回车，不显示空格，换行 inherit：从父元素中继承此属性
3.省略号号显示
说明： text-overflow：clip/ellipsic; clip:默认值，不显示省略号（...）， ellipsis：显示省略号 但单行文本溢出显示需要省略号需要同时设置以下声明： 1.容器的宽：width：200px 2.强制文本在同一行显示：white-space:nowrap 3.溢出内容为隐藏属性：overflow:hidden 4.溢出文本显示省略号：text-overflow:ellipsis;
3、盒子
1盒子模型
盒模型是css布局的计算，他规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面快捷，即都包含边框，编辑，补白，内容区，这就是盒模型。
外边距
边框
内边距
内容区 内边距 边框 外边距 边框 内边距 内容区
2.内边距
padding 内边距 内容区大小不会改变，会增加四边厚度1.一个值，四个方向都一样2.两个值，上下，左右都一样3.三个值，上 左右都一样 下4.四个值，上 右 下 左 顺时针方向 内边距特性 1.背景色蔓延到内边框2，可以设置单一方向边距padding-方向top bottom left right3.不支持负数内边距大小
3.边框
border:10px solid red transparent透明色边框粗细 边框样式 边框颜色 1.边框样式：solid实线 double双实线 dashed线状线 dotted点状线 2.背景色 也能蔓延到边框上 3.边框会增加四边厚度，内容区域不受影响 4.可以设置四个方向不同的样式a) border-top:5px solid redborder-lift:3px double green b)border 可以拆分为border-widthborder-styleborder-colo 一个值，四个方向都一样 两个值，上下，左右都一样 三个值，上 左右都一样 下 四个值，上 右 下 左 顺时针方向
4.外边距
margin属性 两个容器直接的间距就是外间距，margin
margin:50px
1.可以设置单个方向一个值，四个方向都一样两个值，上下，左右都一样三个值，上 左右都一样 下四个值，上 右 下 左 顺时针方向
margin-top/lift/right/bottom:
2.背景色不蔓延
3.*{margin:0}
！！！4.外边距支持负值，往反方向移动
5.屏幕水平居中 margin:0px auto; 横向居中方案上下垂直auto是没有意义的
外边距特性：
1.兄弟关系，两个盒子垂直方向外边距取最大值两个盒子水平方向外边距会合并处理，外边距相加
2.父子关系：给子盒子加外边距会作用到父盒子上1.子margin-top==>父的padding-top，注意高度计算 给父盒子加内边距2.给父盒子设置边框 transparent 注意高度计算3.给父盒子或子盒子加浮动4.overflow:hidden; BFC构建一个块能实现内部子标签不影响后面内容
盒子案例：/* img 与p不是一个类型会有间隔把img通过 display，转换成block*/
5.盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）
h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。 必需 单位： px
v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。 必需 单位： px
blur：阴影模糊度，不能取负数。 可选 单位： px
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。 可选 单位： px
inset：表示添加内阴影，默认为外阴影。可选 box-shadow: 0 0 20px 10px green inset;
当 spread 为0时，阴影大小与元素大小相同。
.box1 {background-color: yellow;/* 多个阴影 *//* 盒子阴影 */box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;}
css属性和属性值，溢出属性，css盒子相关推荐
- css标签折行显示溢出隐藏,css 文本自动换行和超出隐藏
强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 white-space:nowrap; } 超出 ...
- 为 protocol 中属性添加默认值
首先放个简单的Playground做下示范. 普通 protocol 中的 get set protocol中属性可以声明为{ get }或者{ get set }.大多数人第一眼肯定觉得{ get ...
- Java-Day11 面向对象遍程的入门 (类属性的默认值、构造方法、类的成员、static关键字、类的成员加载顺序、Java(权限)访问修饰符)
目录 1. 类的属性的默认值问题 2. 构造方法(Constructor) 3. 类的成员 3.1 类的成员之一:属性 3.2 UML类图 4. static关键字 5. 类的成员加载(运行)顺序 6 ...
- css html自定义属性,是时候开始用 CSS 自定义属性了
自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用.由自定义属性标记设定值(比如: --main-color: black;),由var() 函 ...
- css浮动，清除浮动，溢出属性，定位，设置透明度
浮动>>>float 在css中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是什么元素. 关于浮动的两个特点: 浮动的框可以像做或向右移动,直到它的外边缘碰到包含框 ...
- CSS基础3-float、溢出属性
模块回顾 1.浅谈布局 2.音视频标签 一.浅谈布局 1.float属性:可以使对象浮动,引起对象浮动时,对象将被视作块对象(block-level),可应用于非绝对定位的任何元素上. 取值:none ...
- CSS中position的几个属性值
CSS中position的几个属性值 position的四种取值 : static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 ...
- [css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解
[css] 说下你对css样式的这几个属性值initial.inherit.unset.revert的理解 initial(初始).inherit(继承).unset(未设置).revert(还原) ...
- 学习CSS的background属性及其取值（实践）
CSS的背景属性 属性 描述 可用值 background 设置背景的所有控制选项 其他背景属性可用值的集合 background-color 设置背景颜色 命名颜色.十六进制颜色等 backgrou ...
最新文章
- 什么是m叉树_重型货架是什么？重型仓储货架介绍
- 如何将sql查询出的结果，用符号隔开
- php函数剩余时间,php计算剩余时间的自定义函数
- 在 OS X 中使用 OpenResty
- Golang中GOPATH在Goland的理解
- Windows11右下角出现评估副本水印如何去除？
- 数据结构----------实现最小堆排序
- linux——线程通信(1)
- android /system,android:fitSystemWindows详解
- 测试计划剔除 log剔除_我是如何在整个公司面前被剔除的（以及为什么这样做很好）...
- 副法线和正切是什么?
- DBGridEh使用指南
- element ui设置表格表头高度和每一行的高度
- 响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
- Linux用户宝典：值得一用的5款远程桌面应用程序
- nacos 一直访问本地地址
- 数据中心交换机横向虚拟化集群漫谈
- java腾讯滤镜接口_文档中心
- 承前2021，启后2022
- 互联网产品经理常用软件及工作平台 （转）