★ CSS
文章平均质量分 68
CSS
枫眠cc
热爱是所有的理由和答案。
展开
-
CSS:样式表
CSSCSS(Cascading Style Sheets)美化样式。CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。CSS的...原创 2020-04-16 17:51:28 · 4513 阅读 · 1 评论 -
CSS:选择器
选择器定位到某个标签添加样式信息基本选择器1、标签选择器(body,div,p,ul,li...)根据标签名称定位到元素,会把当前网页上的所有的这个标签的样式更改掉有多个标签时,中间使用“,”隔开标签名称{样式名称:样式值;...;}p{ color:firebrick; font-size:50px;}2、类选择器(.)某一类标签可以通用一...原创 2020-04-16 18:34:18 · 359 阅读 · 0 评论 -
CSS:属性
CSS属性文本属性 属性 格式 描述 color 设置文本颜色 direction 设置文本方向。 line-height line-height:20px/150%/1.5; ...原创 2020-04-17 17:20:53 · 121 阅读 · 0 评论 -
CSS:盒子模型
盒子模型盒子模型属性网页中的所有元素都可以看成一个个的盒子,盒子模型由以下四部分组成:外边距、边框、内边距、内容CSS就是控制盒子的尺寸、位置等,来实现网页的布局<style type="text/css">.box{ margin: 15px; border: 5px solid blue; padding: 10px; width...原创 2020-04-17 17:29:33 · 326 阅读 · 0 评论 -
CSS:布局
布局普通文档流(标准文档流):元素从上至下排列的顺序脱离文档流:元素从正常的排列顺序被抽离浮动:将元素移动到父元素最左和最右,可以将元素按着我们的意思进行排列1.标准流(最稳定)2.浮动流(float其次)3.定位流(稳定性最后)块级标签独占一行,从上到下依次排列在文档流中,不设置宽高时,宽度是充满父容器,高度包裹住内容,设置宽高起作用脱离文档流后,不设置宽...原创 2020-04-17 18:03:41 · 545 阅读 · 1 评论 -
CSS:CSS3新增属性
CSS3新增属性1、border-radius:圆角边框border-radius:10px 20px 30px 40px; /*圆:值为半径*/border-radius:10px 20px 30px 40px/20px 30px 40px 50px; /*椭圆*/2、box-sizing:改变盒模型的模式box-sizing:content-box/border-...原创 2020-04-27 16:46:13 · 469 阅读 · 1 评论 -
CSS:浏览器内核
浏览器内核所谓内核,就是常驻内存、能够快速响应的那一部分核心代码,非内核代码都是要用到时再调入内存并执行的。常见浏览器的内核,一般不外乎微软的IE 内核和webkit内核。一、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBro原创 2020-05-11 17:26:03 · 711 阅读 · 1 评论 -
CSS Hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应该是目前最全原创 2020-05-11 17:37:08 · 331 阅读 · 0 评论 -
CSS:常见bug
图片1、图片下方有空隙产生(原因是:图片嵌套在一个父元素里而产生的空隙),解决方案:img{vertical-align:middle;} /* vertical-align:top/bottom/middle */或者img{display:block;}2、在各个浏览器下img有空隙(原因是:图片换行写产生的3像素的空隙),解决方案:img{float:left;} /* 让图片浮动 */3、input与img垂直方向不对齐问题或者img与文本之间垂直方向不对齐问题,原创 2020-05-11 18:04:42 · 345 阅读 · 1 评论