HTML/CSS基础教程学习
文章平均质量分 52
煲仔灬饭
一名IT爱好者的自学之旅
展开
-
CSS常见浏览器兼容性问题与解决方案
在前端项目中,经常会碰到需要处理不同浏览器兼容性的CSS样式,故在此做初步的记录总结,后续继续更新完善。问题一.不同浏览器的标签默认的外补丁和内补丁不同现象:不同浏览器标签的margin/padding差异较大解决方案:*{margin:0;padding:0}问题二. 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大现象:在横向布局中,使用div float布局时,同时横向间距设置用margin实现时,在IE6中后面的一块会.原创 2021-02-17 13:19:55 · 1358 阅读 · 0 评论 -
踩坑笔记(九): 修改ant-design组件库中的样式
前言:在响应式项目中,有部分地方使用到了React UI组件库ant-design,由于是封装好的UI库,使用的单位都是px;与在响应式项目中用到单位(rem)不符,因此,需要修改。新建css或less文件引入UI库并渲染到页面后,右键检查元素,通过选择到对应的UI标签,查看它的class类名3. 根据对应的类名和父子关系等,在css或less文件等修改样式,如:4.在jsx文件中等引入。后记:UI组件库毕竟就是已经将样式进行了更好的封装,在实际应用中更加偏向于固定样式的布局,在响.原创 2020-12-29 21:31:53 · 1799 阅读 · 1 评论 -
踩坑笔记(四):CSS 可继承属性与不可继承属性
前言:在前期项目coding过程及牛客网刷题过程中,多次碰到CSS属性的继承,且在部分情况下混淆,故在此作总结记录。 CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。可以被继承的属性元素可见属性: visability字体系列属性属性含义font-family元素的字体系列font-wieght字体粗细font-size字体大小font-style字体风格font-varian.原创 2020-11-29 19:29:54 · 162 阅读 · 0 评论 -
CSS 垂直居中的方法
CSS垂直居中方法一 : 设置行高line-height原理:将line-height设置为和父元素高度一样的值,即在行内元素的上下都加行高的1/2适用范围:“单行”的行内元素(inline、inline-block)。如果是多行,还将line-height设置为高度一样的值时,会“溢出”父元素。方法二: 添加伪元素vertical-align:middle,指的是父元素内的所有元素垂直位置相互居中,并不是相对于外框的高度垂直居中,即子元素的“中心”在一条直线上。所以,可以利用添加伪元原创 2020-11-01 15:40:45 · 159 阅读 · 0 评论 -
HTML 行内元素与块元素
块级元素-block element行内元素-inline element块级元素,行内元素与行内块元素的区别元素特性块元素独占一行可以设置宽高,如果不设置则宽度自动填满父元素宽度,高度被内容撑开;如无内容,则高度为空行内元素不会独占一行,相邻的行内元素会排列在同一行,直至换行设置width、height、margin、padding等无效行内块元素特殊的行内元素,可以设置宽高不会独占一行,相邻的行内元素会排列在同一行,直至换行典型元素:img button原创 2020-09-16 16:15:05 · 123 阅读 · 0 评论 -
CSS弹性盒及常用属性
CSS弹性盒及常用属性Flex(弹性盒,伸缩盒)是CSS中除定位,浮动等的另一种布局手段,可以使元素跟随页面的大小而改变,主要用来代替浮动来完成页面的布局。常用于移动端的设计与布局。弹性容器要使用弹性盒,首先需要将外部父元素设置为弹性容器。弹性容器常用属性如下所示:弹性元素弹性容器的子元素是弹性元素(弹性项)。弹性元素的常用属性如下所示:...原创 2020-06-10 16:08:58 · 247 阅读 · 0 评论 -
CSS定位与层级
CSS定位CSS通过定位属性可以将元素摆放到页面的任意位置。属性名:position属性值:static 默认值,元素是静止的没有开启定位relative 相对定位absolute 绝对定位fixed 固定定位sticky 粘滞定位相对定位relative开启元素的相对定位以后,如果不设置偏移量元素不会发生任何变化偏移量中的定位位置/参照物:元素在文档流中的原位置相对定位不会元素脱离文档流,不会改变元素的性质(行内/块元素)相对定原创 2020-06-06 19:19:14 · 568 阅读 · 0 评论 -
CSS外边距折叠与高度塌陷问题
一. CSS外边距折叠问题在CSS垂直布局中,相邻方向的垂直外边距会发生重叠现象。垂直外边距折叠问题分2种情况:兄弟元素在相邻兄弟元素的垂直外边距中,当发生重叠时,会取两者之间的较大值。该现象可以避免两个元素间的距离过大,在实际开发中通常是有利的,无需处理。eg: 元素A margin-bottom:100px; 相邻兄弟元素B marigin-top:200px; 则元素A与B间的外边距为200px。*如果兄弟元素的垂直外边距一正一负,则取两者之和;如果均为负值,则取两者绝对值较大的值原创 2020-05-30 16:16:44 · 361 阅读 · 0 评论 -
CSS标准盒模型
CSS将页面中的所有元素都设置为一个矩形盒子CSS对页面的布局,即对不同盒子位置与内容的布局原创 2020-05-25 16:12:49 · 191 阅读 · 0 评论 -
CSS选择器餐厅练习
CSS选择器餐厅练习练习地址http://flukeout.github.io/答案:1.platediv plate.class platediv.class plate2.同上3.#fancyplate:first-childplate:first-of-type4.plate appleplate>apple5.#fancy pickle#fancy>pickle6..smallapple.small7.orange.smal原创 2020-05-24 16:18:19 · 2095 阅读 · 1 评论