![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Html+CSS
文章平均质量分 67
boxyuan
这个作者很懒,什么都没留下…
展开
-
伪元素,使用伪元素来清除浮动
伪元素:在页面上不存在的元素,但是可以通过css来添加上去种类::before:after注意:每个元素都有自己的伪元素使用伪元素来清除浮动:.clearfix:after { content:""; height: 0; line-height: 0; display: block; clear: both;原创 2017-07-29 14:55:46 · 975 阅读 · 0 评论 -
浮动
浮动:解决一行中显示多个盒子的问题,并且这些盒子的位置可控float:leftfloat:right标准流:浏览器默认摆放盒子的标准浮动的特点:浮动的元素会脱离标准流:如果一个元素按照正常的标准来显示会在html中所属的位置占位,后面的元素会紧跟着他,但是浮动脱离了标准流,将来在看到浮动的元素之后,不能以正常的标准来进行判断浮动以后的元素会覆盖标准流原创 2017-07-28 18:37:22 · 390 阅读 · 0 评论 -
文章列表,行高的单位,行高与font关系,margin特殊现象
/*清除标签默认的padding和margin*/ *{ padding: 0; margin: 0; } body { background-color: gainsboro; } .content{ width: 328px; height: 226px; border: 1px solid #00BFFF;原创 2017-07-28 17:50:04 · 490 阅读 · 0 评论 -
盒子模型
盒子模型:概念:在写一个html页面的时候,其实就相当于在这个页面中叠盒子。思想:万物皆盒子具体内容:盒子的挡板:border盒子的泡沫:padding盒子里的物品:content盒子与盒子之间的距离:marginboder:盒子的挡板div{ width: 200px; height: 200px; background-col原创 2017-07-27 21:30:41 · 439 阅读 · 0 评论 -
行高等于容器高度可以垂直居中
行高:应用:如果行高等于容器行高那么元素在父容器中垂直居中问题:为什么行高等于容器的高度,元素在父容器中垂直居中?行高的定义:两行文本之间基线的距离叫行高div{ display: inline-block; text-align: center;/*水平居中*/ background-color: plum; widows: 100px;原创 2017-07-27 16:30:44 · 1874 阅读 · 0 评论 -
锚伪类的四种伪类
伪类:与类选择器相似但是又有所不同锚伪类: a:link { color: #2AABD2; font: "微软雅黑"; font-size: 50px; } 作用:给a标签设置没有访问过的样式a:visiteda:visited { color: palevioletred; font: "微软雅黑";原创 2017-07-27 16:03:29 · 871 阅读 · 0 评论 -
html相关
声明位于html标签最前面,定义文档规范现在都用H5规范标准:标签里面用来存放 title,meta,base,style,script,link,head标签中必须设置的标签是title -------------------------------------------------------------------SEO:搜索引擎优化---原创 2017-07-24 15:56:16 · 271 阅读 · 0 评论 -
透明度,margin为负数的应用,圣杯布局,倒三角
如果定位的盒子没有宽高,那么默认宽高为0如果给子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽透明度:opacity,取值0-1之间的小数margin为负数的应用如果margin-left设置为负数,那么将来这个盒子会像左方向移动如果margin-right设置为负数,那么盒子向右移动圣杯布局左右两边内容保持不变,中间内容根据浏览器大小而改变 圣杯原创 2017-08-03 10:47:36 · 521 阅读 · 0 评论 -
表格与表单
it大佬资料 id 姓名 班级 专业 1 马云 50 阿里 2 马化腾 48 腾讯 3 李彦宏 48 百度 4 雷军 48 小米原创 2017-07-24 16:56:50 · 253 阅读 · 0 评论 -
a标签的几种用法
1、跳转到同一目录的页面例:同一目录下有1.html,2.html,在1.html里面利用a标签跳转到2.html,跳转到2.html2、a标签可以不跳转点我看看有没有反映3、可以在当前页面定位top即定位到p标签id为top,利用页面定位可以定位到页面的其他位置4、在目标页面指定位置定位跳转到指定页面的上部-----------------------------原创 2017-07-24 14:30:57 · 1968 阅读 · 0 评论 -
绝对路径与相对路径
绝对路径:文件带有盘符的路径相对路径:html文件与图片在同一级路径下面:如果html文件在图片的上一级目录:图片在文件的上一级目录:../跳出当前目录回到上一级目录原创 2017-07-24 11:32:41 · 190 阅读 · 0 评论 -
z-index,标签之间的嵌套规则,精灵图,整站练习(css初始化)
z-index定位:作用:设置页面中元素的层级关系取值:正整数标签之间的嵌套规则:行内元素只能包含行内元素 块级元素可以包含所有的行内元素和部分块内元素p标签h标签不能包含块级元素精灵图:将页面上较小的图放在一张大图上制作精灵图:精灵图必须是小的图片精灵图之间一定要留有足够的间隙精灵图的大小一定要大于所有的图片中最大 的那原创 2017-07-30 18:18:36 · 644 阅读 · 0 评论 -
设置文本与图片的对其方式,元素的隐藏
overflow:溢出取值:hidden 会将超出容器的部分隐藏起来 scroll:给容器加上滚动条auto:根据具体情况判断容器是否要加上滚动条元素的隐藏overflow:hidden 将超出部分裁剪掉visibility:hidden可以及将元素隐藏,但是在页面上还保留着原来的位置display:可以将元素隐藏,并且在页面不占据位置display:none原创 2017-07-30 08:17:06 · 326 阅读 · 0 评论 -
让小盒子在大盒子中水平居中,固定定位
* { margin: 0; padding: 0; } .big { width:600px; height: 300px; background-color: powderblue; margin: 0 auto; position: relative; } .small { w原创 2017-07-29 15:55:05 · 1974 阅读 · 0 评论