鬼牛阿飞 - 博客园

2020年10月27日

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .content{ width: 100px; heigh 阅读全文

posted @ 2020-10-27 11:55 鬼牛阿飞阅读(1229) 评论(0) 推荐(0) 编辑

css盒子模型之内边距padding及简写

摘要：如上图,padding值是复合属性按照顺时针(上右下做)顺序,其中padding的内边距影响盒子大小的实际宽高 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type=" 阅读全文

posted @ 2020-10-27 11:30 鬼牛阿飞阅读(343) 评论(0) 推荐(0) 编辑

css盒子模型之宽度和高度

摘要：盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) 1 <div class="pag1"></div> 2 <div class="pag2"></div> 3 <div class="pag3"></div> 4 <div class="pag4 阅读全文

posted @ 2020-10-27 11:03 鬼牛阿飞阅读(1191) 评论(1) 推荐(0) 编辑

css盒子模型图解

摘要：如上截图,选中h2元素,真实的宽度868px,高度25.2px,受填充内边距padding值5px与边框值1px的影响,最终h2的实际宽高为868X252.2px,其中外边距margin不考虑什么是css盒子模型？阅读全文

posted @ 2020-10-27 10:24 鬼牛阿飞阅读(322) 评论(0) 推荐(0) 编辑

2020年9月8日

可以继承和不可以继承的样式属性

摘要：无继承性的属性1.display:规定元素应该生成的框的类型2.文本属性 vertical-align:垂直文本对齐 text-decoration：规定添加文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi:设置文本的方向 3.盒子模型阅读全文

posted @ 2020-09-08 06:12 鬼牛阿飞阅读(737) 评论(0) 推荐(0) 编辑

权重和权重的计算

摘要：基本选择器中标签选择器权重为1,class选择器权重为10,id选择器权重100,通配符选择器*的权重为0-1 后代、子代、交集、并集、相邻兄弟、兄弟的权重为每个单独的选择器的权重相加之和 css权重和基本规则权重记忆口诀:从0开始,一个行内样式+1000,一个id+100,一个属性选择器/clas 阅读全文

posted @ 2020-09-08 05:45 鬼牛阿飞阅读(1161) 评论(0) 推荐(0) 编辑

.css选择器之伪元素选择器

摘要： :first-line伪元素用于向文本的首行设置特殊样式,只能用于块级元素 :first-letter伪元素用于向文本的首字母设置特殊样式 :before在元素的内容前面插入新的内容 :after在元素的内容后面插入新的内容 1 <!DOCTYPE html> 2 <html lang="zh"> 阅读全文

posted @ 2020-09-08 05:44 鬼牛阿飞阅读(1077) 评论(0) 推荐(0) 编辑

css3新增的伪类选择器（面试题）

摘要：列举css3中新增的选择器css选择器有哪些?css3新增的伪类有哪些?参考网址https://www.html.cn/book/css/selectors/pseudo-classes/only-child.htm a:link没有访问之前a的样式;a:visited已访问a的样式;a:hover 阅读全文

posted @ 2020-09-08 05:42 鬼牛阿飞阅读(630) 评论(0) 推荐(0) 编辑

css选择器之伪类选择器

摘要： a:link{color:#ff0000}/*未访问的链接*/ a:visited{color:#00ff00}/*已访问的链接*/ a:hover{color:#ff00ff}/*鼠标移动到链接上*/ a:active{color:#0000ff}/*选中的链接*/ 阅读全文

posted @ 2020-09-08 05:40 鬼牛阿飞阅读(135) 评论(0) 推荐(0) 编辑

css选择器之属性选择器

摘要：对带有指定属性的HTML元素设置样式权重为10 可以为拥有指定属性的HTML元素设置样式,而不仅限于class和id属性属性选择器为所有带有title属性的元素设置样式 [title]{color:red} 属性和值选择器 [title=dhnblog]{border:5px solid #cc 阅读全文

posted @ 2020-09-08 05:39 鬼牛阿飞阅读(248) 评论(0) 推荐(0) 编辑

css选择器之兄弟和相邻兄弟选择器

摘要：相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者有相同的父元素. h1+p{margin-top:50px;} strong+span{backgrond-color:#3385ff;} 加号前面的元素只是用来作为我们查找兄弟的参照标签.它不参与样式的影响. 寻找strong标签的兄弟而且要紧挨阅读全文

posted @ 2020-09-08 05:36 鬼牛阿飞阅读(1164) 评论(0) 推荐(0) 编辑

css选择器之子代选择器

摘要：与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,符号为大括号. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h1>strong{color:re 阅读全文

posted @ 2020-09-08 05:34 鬼牛阿飞阅读(1187) 评论(0) 推荐(0) 编辑

css选择器之后代选择器

摘要：通过依据元素在其位置上的上下关系来定义样式,你可以使标签更加简洁,用空格隔开列表中的strtong元素变为斜体字,而不是普通的粗体字,可以这样定义一个派生选择器. 后代选择器尽量不要超过3个,没有必要把每一个层级都写出来,只需要写出关键节点即可. <!DOCTYPE html> <html> <he 阅读全文

posted @ 2020-09-08 05:33 鬼牛阿飞阅读(541) 评论(0) 推荐(0) 编辑

css选择器之交集选择器

摘要：两种属性同属一个元素的时候,我们可以使用交集选择器来进行元素的准确控制. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p.nam1{} p#name2{} p 阅读全文

posted @ 2020-09-08 05:31 鬼牛阿飞阅读(2528) 评论(0) 推荐(0) 编辑

css选择器之并集选择器

摘要：你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明.用逗号讲需要分组的选择器分开.在下面的例子中,我们对所有的标题元素进行了分组,所有标题的元素都是绿色的! h1,h2,h3,h4,h5,h6{color:green}; 阅读全文

posted @ 2020-09-08 05:28 鬼牛阿飞阅读(1200) 评论(0) 推荐(0) 编辑

公告