随笔分类 -  css

浮动
摘要：浮动 1.元素浮动产生的特点 1. 浮动元素会脱离文档流，后面的的元素会占据原来的位置（显示在底下，文字会被挤出） 2. 不论元素原来的显示模式是什么，设置成浮动，具有自己的显示模式，具有如下特点 ① 默认宽高被内容撑开，不存在外边距塌陷和合并，左右外边距设置auto不会居中 ② 不会被父元素作为文 阅读全文
posted @ 2023-03-13 21:02 chichi0002 阅读(64) 评论(0) 推荐(0)
行内元素 或 行内块元素在布局中的特点
摘要：行内元素 或 行内块元素在布局中的特点 1. 父元素设置的文本属性可以作用于行内元素 和 行内块元素 ① 让行内块元素在父元素中水平居中 给父元素设置text-align:center ② 让行内块元素在父元素中纵向居中 给父元素设置行高与父元素高度一致 给行内块元素本身设置 vertical-al 阅读全文
posted @ 2023-03-13 21:02 chichi0002 阅读(73) 评论(0) 推荐(0)
伪类选择器
摘要：伪类选择器 <style> /* 这几个样式同时设置时的顺序： love hate l(link)ov(visited)e h(hover)a(active)te */ div { width:200px; height: 200px; background-color: #f90; } /* 鼠标 阅读全文
posted @ 2023-03-10 21:10 chichi0002 阅读(20) 评论(0) 推荐(0)
鼠标光标样式
摘要：鼠标光标样式 /* 默认样式 */ cursor: default; /* 隐藏鼠标 */ cursor: none; /* 小手指 */ cursor: pointer; /* 文字光标 */ cursor: text; /* 移动 */ cursor: move; /* 等待，加载 */ cur 阅读全文
posted @ 2023-03-10 21:09 chichi0002 阅读(103) 评论(0) 推荐(0)
列表样式
摘要：列表样式 /* 列表样式，只能对ul、ol、li设置 */ /* 去掉列表前的序列 */ /* list-style: none; */ /* 列表样式为小圆圈*/ list-style-type: circle; /* 列表样式为小圆点*/ list-style-type: decimal; /* 阅读全文
posted @ 2023-03-10 21:08 chichi0002 阅读(60) 评论(0) 推荐(0)
表格样式
摘要：表格样式 table { width: 800px; /* 宽度，自动分配和每列固定。 */ table-layout: auto; table-layout: fixed; /* separate 默认值，分离单元格 collapse 合并单元格 */ border-collapse: separ 阅读全文
posted @ 2023-03-10 21:08 chichi0002 阅读(103) 评论(0) 推荐(0)
背景样式
摘要：1.背景样式 1.1 背景图片 /* 添加背景色后，填满视口 */ background-color: #099; background-image: url( ); background-repeat: repeat; background-repeat: no-repeat; backgroun 阅读全文
posted @ 2023-03-10 20:45 chichi0002 阅读(46) 评论(0) 推荐(0)
关于text-decoration
摘要：关于text-decoration 作用：text-decoration属性规定添加到文本的修饰，下划线，上划线，删除线等 text-decoration属性是以下三种属性的简写： text-decoration-line text-decoration-color text-decoration- 阅读全文
posted @ 2023-03-10 20:44 chichi0002 阅读(82) 评论(0) 推荐(0)
列表、表格、表单
摘要：定义列表 ==格式：== dl dt dd dd 代码如下： 代码展示效果： ==注意：== 一个dt中可以包含一个dd，也可以包含多个dd 表格 表格中的标签都有： table 表格的包裹标签 caption 表格标题 thead 表头 tboody 表格主体 tfooot 表尾 tr 行 th 阅读全文
posted @ 2023-03-07 08:52 chichi0002 阅读(49) 评论(0) 推荐(0)
超链接
摘要：超链接 <a href="http://www.baidu.com" target="_self">百度</a> <!-- _self:是默认属性值，在当前窗口打开，不需要设置 _black:点击链接，产生新的窗口打开链接地址 --> 超链接打开应用 <h2>打开应用</h2> <a href="m 阅读全文
posted @ 2023-03-04 16:58 chichi0002 阅读(86) 评论(0) 推荐(0)
HTML5的新增特性
摘要：HTML5 的新增特性 1.HTML5 新增的语义化标签 header ：头部标签 nav：导航标签 article：内容标签 section：定义文档某个区域 aside：侧边栏标签 footer：尾部标签 ==注意:== 1.这种语义化标准主要是针对搜索引擎的 2.这些新标签页面中可以使用多次 阅读全文
posted @ 2022-10-03 10:03 chichi0002 阅读(79) 评论(0) 推荐(0)
css布局三角巧妙运用-三角强化
摘要：css布局三角巧妙运用-三角强化 原理：做出一个矩形盒子（如下：红色）和一个直角三角盒子（如下：蓝色），将直角三角定位到矩形右侧。 直角三角代码如下： *注意：直角三角是由一个width和height均为0的正方形盒子变化而来，通过设置盒子的边框宽度来实现大小，案例中不是等腰三角形，需要通过增加上边 阅读全文
posted @ 2022-10-02 21:41 chichi0002 阅读(116) 评论(0) 推荐(0)
单行文字溢出省略号显示、多行文字溢出省略号显示
摘要：单行文字溢出省略号显示、多行文字溢出省略号显示 1、单行文字溢出显示省略号——必须满足三个条件 /*1、先强制一行显示文本*/ white-space: nowrap ; (默认 normal 自动换行) /*2、超出的部分隐藏*/ overflow: hidden; /*3、文字用省略号替代超出的 阅读全文
posted @ 2022-10-02 20:18 chichi0002 阅读(445) 评论(0) 推荐(0)
vertical-align 属性应用
摘要：vertical-align 属性应用 CSS的 vertical-align 属性使用场景：经常用于设置图片或表单（行内块元素）和文字垂直对齐。 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。 vertical-align :baseline | top | m 阅读全文
posted @ 2022-10-02 20:00 chichi0002 阅读(67) 评论(0) 推荐(0)
CSS用户界面样式-鼠标样式[cursor]、轮廓线[outline]、拖拽文本域[resize]
摘要：CSS用户界面样式-鼠标样式[cursor]、轮廓线[outline]、拖拽文本域[resize] 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。 1.鼠标样式 li{cursor:pointer;} 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2.表单轮廓— 阅读全文
posted @ 2022-09-25 22:56 chichi0002 阅读(262) 评论(0) 推荐(0)
CSS-显示与隐藏[display、visibility、overflow]
摘要：CSS-显示与隐藏[display、visibility、overflow] 本质：让一个元素在页面中隐藏或者显示出来。 1.display显示隐藏 display属性用于设置一个元素应如何显示。 display:none ; 隐藏对象 display : block ; 除了转换为块级元素之外,同 阅读全文
posted @ 2022-09-20 16:01 chichi0002 阅读(371) 评论(0) 推荐(0)
CSS-三角形制作
摘要：CSS-三角形制作 原理：将四边形的高和宽设置为0，设置边框的宽度和颜色，比如需要设置倒正三角形，将上边框设置宽度和颜色，其他三条边框设置为透明色。 ==案例：== 效果图： 代码： font-size的兼容性: 文字本身的大小不兼容。 同样是font-size:14px的宋体文字，在不同浏览器下占 阅读全文
posted @ 2022-09-20 14:16 chichi0002 阅读(37) 评论(0) 推荐(0)