
HTML与CSS
文章平均质量分 52
HTML与CSS
小森呀
这个作者很懒,什么都没留下…
展开
-
css常见属性
文字: font-size 字体大小 font-style 字体样式: normal-----文本正常显示 italic-----文本斜体显示 oblique-----文本倾斜显示 font-weight 字体粗细: normal-----默认 bold-----加粗 bolder-----相当于<stron...原创 2021-04-18 11:54:41 · 152 阅读 · 0 评论 -
文字溢出显示省略号
单行文本:/*先强制一行显示*/white-space: nowrap;/*超出隐藏*/overflow: hidden;/*超出部分用省略号代替*/text-overflow: ellipsis;多行文本:overflow: hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型*/display: -webkit-box;/*限制一个块元素显示文本的行数*/-webkit-line-clamp:2;/*设置或检索伸缩盒对象的子元素的排列.原创 2020-08-09 23:32:03 · 175 阅读 · 0 评论 -
选择器及其权重
* 通配符 div 元素选择器 div,p - .box 类选择器 #box id选择器 div p 后代选择器 div>p 子代选择器 div+div 相邻兄弟选择器 属性选择器:E[att] 选取带有att属性的元素 E[att="val"] 选取带有att属性且值为val的元素 E[att~="val"] 选取带有att属性且值包含val词汇的元素 E[att|="val"]...原创 2020-08-10 00:44:20 · 298 阅读 · 0 评论 -
图片底部空白缝隙问题
原因:行内块元素与文字基线对齐解决方法:1.给图片添加vertical-align:middle|top|bottom等(建议使用)2.将图片转换为块级元素原创 2020-08-09 23:20:58 · 216 阅读 · 0 评论 -
margin塌陷的原因及解决方法
原因:子元素设置浮动,父元素高度塌陷解决:给父元素添加一个边框原创 2020-06-20 10:35:19 · 1998 阅读 · 0 评论 -
css动画
transform(转换变换) origin 定义旋转基点-----坐标值 left top center right bottom rotate 旋转-----旋转角度可以为负数,单位deg skew 扭曲-----两个参数,分别为相对x轴倾斜,相对y轴倾斜,单位deg scale 缩放-----一个参数是横竖都缩放,两个参数是分别控制横向和纵向的...原创 2021-04-18 12:35:46 · 223 阅读 · 0 评论 -
overflow:hidden
失效场景父元素有overflow:hidden属性,子元素超出父元素的部分并没有被剪切隐藏掉失效原因子元素有绝对定位,脱离了文档流,不受父元素约束解决方法给父元素添加定位原创 2021-11-29 00:02:15 · 338 阅读 · 0 评论 -
定位
定位 是否脱标 是否占位置 参照元素 static静态定位 否 - 无定位(默认定位方式) relative相对定位 否 占 原来的位置 absolute绝对定位 是 不占 带有定位的最近的父元素 fixed固定定位 是 不占 浏览器可视区 sticky粘性定位 否 占 浏览器可视区 注意:1.绝对定位如果没有祖先元素或者祖先元素无定位,则以浏览器可视区为参照2.固定定原创 2020-08-02 13:46:55 · 179 阅读 · 0 评论 -
表格相关属性
cellpadding:规定单元格与其内容之间的距离cellspacing:规定单元格与单元格之间的距离rowspan:跨行合并colspan:跨列合并border-collapse:collapse 合并相邻单元格之间的边框线原创 2020-07-17 00:42:49 · 178 阅读 · 0 评论 -
浮动
原理:float属性创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘特性:1.脱离文档流(不保留原先的位置)2.一行内显示并且元素顶部对齐3.具有行内块元素的特性(任何元素都可以浮动)注意:1.如果块级元素没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定2.浮动的元素只会影响浮动元素后面的文档流,不会影响前面的文档流为什么要清除浮动:子元素浮动不占位置,父级元素没有设置高度时,父级元素高度为0,影响后边..原创 2020-07-25 01:00:31 · 260 阅读 · 0 评论 -
块级、行内、行内块级元素
块级元素:1.独占一行2.可以设置高度、宽度,外边距、内边距3.宽度默认是父级的100%4.里边可以放行内或者块级元素注意:文字类的元素(p标签、h1~h6标签)内不能使用块级元素行内元素:1.相邻行内元素都在一行上2.不可以设置高度、宽度,外边距、内边距3.宽度是它本身内容的宽度4.只能放文本或其它行内元素注意:1.链接里不能放链接2.a标签里可以放块级元素,但是将a标签转换为块级模式最安全行内块级元素:1.相邻行内块元素都在一行上,..原创 2020-07-20 23:51:00 · 215 阅读 · 0 评论 -
显示与隐藏
display不占位置visibility占位置overflow溢出隐藏(有定位的盒子会隐藏多余的部分)原创 2020-08-02 15:56:50 · 233 阅读 · 0 评论 -
video和audio
<video src="url" controls="controls"></video> <video controls="controls"> <source src="url" type="video/mp4" /> <source src="url" type="video/ogg" /> 自定义文字 </video> <audio src="url" controls="controls"..原创 2021-04-21 23:11:20 · 105 阅读 · 0 评论 -
value与placeholder
value:(占空间)input框的默认内容placeholder:(不占空间)input框的提示内容原创 2020-07-17 00:31:23 · 281 阅读 · 0 评论 -
src与herf的区别
src:(引入)将资源下载到页面,当浏览器解析到该元素时,会暂停其它资源的下载和处理,直到将该资源加载,编译,执行完毕herf:(引用)建立页面与资源之间的关系,当浏览器解析到该元素时,就会并行下载资源,并且不会停止对当前页面的处理...原创 2020-07-17 00:00:21 · 677 阅读 · 0 评论 -
alt与title
alt:(局部属性,一般用在图片上,替代作用)图片不能正常显示时,在原本加载图片的地方显示的信息title:(全局属性,可用于大多数标签,提示作用)鼠标悬停时显示的信息link和style元素中的title表示样式表的名称...原创 2020-07-16 23:45:41 · 712 阅读 · 0 评论 -
元素居中显示的方法
{ position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; }{ position: absolute; margin: auto; left: 0; ...原创 2020-06-20 10:39:46 · 408 阅读 · 0 评论 -
阴影
h-shadow 必选,水平位置,可以负值 - v-shadow 必选,垂直位置,可以负值 - blur 可选,模糊距离 - color 可选,颜色 spread 可选,尺寸 文字阴影没有此项 inset 可选,将外部阴影 (outset) 改为内部阴影 文字阴影没有此项 ...原创 2020-08-09 23:06:34 · 161 阅读 · 0 评论 -
input框
select:(下拉选择框)至少包含一对option,option上设置selected="selected"表示默认选中此项checked:(单选框,复选框)设置此属性表示默认选中此项单选框必须name值相同文本域:cols:表示有多少列rows:表示有多少行<label for="id">值</label>:扩大选择区域...原创 2020-07-17 00:58:53 · 247 阅读 · 0 评论 -
a标签
a标签的作用:链接:实现页面之间的跳转锚点:实现页面之内的跳转下载:实现文件的下载功能原创 2020-07-17 00:09:34 · 618 阅读 · 0 评论 -
favicon图标
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">原创 2020-08-10 20:02:25 · 201 阅读 · 0 评论 -
行高
line-height:100px;的原理:就是100px-文字的大小,然后上下边距平分剩下的像素值如果行高等于100px,则文字垂直居中如果行高大于100px,则文字偏上如果行高小于100px,则文字偏下原创 2020-07-20 23:02:15 · 436 阅读 · 0 评论