![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
css基础
Sun_Raiser
csdn:https://blog.csdn.net/Sun_Raiser
知乎:https://www.zhihu.com/people/no-one-71-61
个人网站(开发中):https://sunraiser.top
展开
-
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范1 文件管理文件名用英文命名css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式、比如页面的头部尾部、重复使用字体、字号等)index.css图片名称图片命名尽量与其模块样式名称保持一致,尽量用小写如 login_bg.jpg login_user_ico.gif2 html书写规范h5模版书写规范 (缩进、属性值必须用双引号、标签要闭合、属性标签等名字由数字下划线或小写字母组成)语义化比如 图片添加a原创 2021-07-13 22:05:31 · 370 阅读 · 0 评论 -
前端css基础知识点之sprite——雪碧(精灵)
前端css基础知识点之sprite——雪碧(精灵)css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用background-image、background-repeat、background-position组合进行背景定位,适用于小图标优点减少网页的http请求,从而提高页面的性能图片命名更容易更换风格方便缺点必须限定容器大小符合背景图元素位置/*代码写法*/.box { width: 48px; height: 4原创 2021-07-13 22:04:09 · 200 阅读 · 0 评论 -
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity——透明度opacityopacity:num /*num 0到1*/兼容性 ie9及以上和标准浏览器都支持特点 设置opacity的元素的所有后代会一起具有透明性用法 调整图片或模块整体不透明度rgba兼容性 ie9及以上和标准浏览器都支持使用 设置颜色的不透明度,用于调整color,background-color等ie专属滤镜 filter:Alpha(opacity=x)兼容性 ie6-9 ie10开始废除...原创 2021-07-13 22:02:44 · 494 阅读 · 0 评论 -
前端css基础知识点之条件hack
前端css基础知识点之条件hack条件hack选择ie浏览器以及不同版本是ie特有功能,ie10开始标准模式下 不再支持条件注释<!--[if IE]> <p style="backgroud: red;"> 只能被ie识别 </p><![endif]--><!--[if IE 6]> <p style="backgroud: red;"> 只能被ie6识别原创 2021-07-13 22:01:44 · 162 阅读 · 0 评论 -
前端css基础知识点之BFC——块格式化上下文,清除浮动
前端css基础知识点之BFC——块格式化上下文,清除浮动块格式化上下文(Block Formatting Context,BFC)清除浮动前:清除浮动后:通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。BFC特点1.内部标签会在垂直方向一个接一个放置2.垂直方向的距离由margin决定,属于同一个BFC的两个相邻标签会发生重叠3.每个标签的左外边距与包含块的左边界相接触,从左到右,即便浮动也如原创 2021-07-13 21:58:06 · 148 阅读 · 0 评论 -
前端css基础知识点之position——定位
前端css基础知识点之position——定位相对位置position: relative;left:10px;top:10px; /*相对于自己原来的位置*/特性1.不脱标2.老家留坑 形影不离3.可以提升层级作用1.相对自己进行位置微调2.配合绝对定位使用绝对定位position: absolute; left:10px;top:10px;参考点1.假如该绝对定位元素没有定位(相对或者绝对原创 2021-07-13 21:56:27 · 315 阅读 · 0 评论 -
前端css基础知识点之after,before,overflow,vertical-align
after,before.box:before {/* before: 在box内部的前面after: 在box内部的最后*/content: '456';display: block;background-color: blue;width: 60px;height: 40px;}overflowoverflow: hidden;/* 让溢出的内容隐藏*/overflow: scroll;/* 滚动 显示滚动条 内容溢出可以使用滚动条*/overflow: auto;原创 2021-07-13 21:55:21 · 357 阅读 · 0 评论 -
前端css基础知识点float——浮动以及清除浮动带来的影响
前端css基础知识点float——浮动float和display不要写在同一个元素内让两个有宽高的盒子平排 我们可以让这两个盒子转成行内块,但是盒子之间有空白浮动的诞生就可以让元素平排 并且还可以设置宽高浮动特点1.相互贴靠(怎么贴靠)2.浮动的元素可以设置宽高3.脱离标准流(脱标)清除浮动带来的影响清除浮动(带来的影响)方法1.给浮动元素的父亲设置高度 ——有高度的盒子可以关闭浮动2.clear:both 在父亲末尾增加一个元素 给这个原创 2021-07-13 21:52:05 · 269 阅读 · 0 评论 -
前端css基础知识点之element——元素类型
前端css基础知识点之element——元素类型元素根据表现的特性分为块级元素(block )、行内元素(inline)、行内块元素(inline-block)元素类型特点块级元素1 独占一行 2 设置宽高有效(padding、margin、line-height) 3 不设置宽度 默认是父亲的100%行内元素1 可以与其他行内元素并排 2 设置宽高无效(不支持垂直方向的margin和padding) 3 元素靠元素撑开行内块元素1 可以与其他行内元素或行内块元素并原创 2021-07-13 21:49:08 · 579 阅读 · 0 评论 -
前端css基础知识点笔记之background——背景
前端css基础知识点笔记之background——背景边界border: 3px solid blue;背景图片background-image: url(programer.jpeg);/*默认会平铺*/背景重复background-repeat: no-repeat或 repeat-x 或repeat-y;背景图定位background-position: left top;background-position: center center;backgrou原创 2021-07-13 21:47:17 · 193 阅读 · 0 评论 -
前端css基础知识点之margin——页边距
前端css基础知识点之margin——页边距margin塌陷父子塌陷当父亲没有设置padding、border、内容时,父子元素垂直方向的margin会重叠以父子中较大的为准 而不是相加效果如下解决办法把儿子的margin转化为父亲的padding 注意盒子总高度变化给父亲增加一个属性 overflow: hidden兄弟塌陷垂直方向上相遇的margin会发生塌陷,以较大的值为准只设置一个方向即可...原创 2021-07-13 21:46:12 · 434 阅读 · 0 评论 -
前端css基础知识点之box-model——盒子模型
前端css基础知识点之box-model——盒子模型盒子模型 width/height/padding/border/margin属性含义width宽度 指的是内容宽度 不是盒子真实宽height高度 指的是内容高度 不是盒子真实高padding内边距 指的是内容到边框的距离border边框margin元素与元素之间的间距width,heightwidth: 200px;height: 200px;padding/* 一个原创 2021-07-13 21:44:52 · 161 阅读 · 0 评论 -
前端css基础知识点之text&font——字体
前端css基础知识点之text&font——字体设置文字颜色color: red;字颜色方式字颜色方式颜色单词 red yellow blue …rgb(0255,0255,0~255)十六进制 #ff0000 #00ff00 #ffffff #000000 #f00 #0f0 #fff #000 #aa7712文字水平对齐方式text-align:left或center或right文本的装饰效果text-decorat原创 2021-07-13 21:43:32 · 474 阅读 · 0 评论 -
前端css基础知识点之selector——选择器
前端css基础知识点之selector——选择器7种常用选择器1、通配符选择器 * 表示所有标签* { background-color: blue;} 2、标签选择器 标签名 一般对一类标签设置样式 采用h1 { color: red;}a { text-decoration: none;}3、id选择器 #id 用的不多 一般用在独一无二的元素#box2 { background-color: green;}4、类选择器 .class原创 2021-07-13 21:42:00 · 521 阅读 · 0 评论