css样式

1.说一下css盒子模型 Css盒子本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和内容。Css盒子模型包括IE盒子模型标准的W3C盒子模型。这两种盒子模型都包含margin，border，padding，和content。不同的是，标准W3C盒子模型中content不包含任何内容，而IE盒子模型中content包含border和padding，在标准盒子模型中width指content部分的宽度，而IE盒子模型中width=content+padding+border这三个部分的宽度，故使得计算整个何止的宽度时存在差异： 标准的盒子模型的盒子宽度是：左右border+左右padding+width IE盒子模型中盒子宽度：width 在CSS3中引入的border-sizing属性，border-sizing：center-box表示标准盒子模型，border-box表示IE盒子模型，padding-box表示这个属性值的宽度包含了左右的padding+width 2.画一条0.5px的线 （1）采用mwta viewport的方式 <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0"> Initial-scale设置页面初始缩放值为0.5

（二）页面展示 各位朋友大家好，我们接着上文继续开发，这一节我们主要是把上一节最后的图片素材从新组合，用 web形式展现，我们用到的主要工具是：HBuilderX，这个工具我就不介绍了，上手很容易，很好用的，具体情况大家可以百度研究一下。 1.新建项目 首先启动 HBuilderX开发工具，新建一个项目，具体操作“文件”→“新建”→“项目”如图2-1所示。 图 2-1 新建项目 在弹出的对话框中选择普通项目，项目名称填入 “网页播放器”，选择存储路径，选择空项目，单击创建即可，如图2-2所示。 图 2-2 设置新项目 2.新建目录 在左侧的项目管理窗口，项目上单击右键选择 “新建”→“目录”，CSS文件夹，用于存放样式文件，如图2-3所示新建目录。新建images目录，存放我们上节剪切的图片素材，记得把所有需要的图片素材全部拷贝到该目录下，拷贝十分简单，在文件中复制图片，在项目管理images目录点击右键，选择粘贴，这样所复制的图片就全部拷贝到该目录下了；新建JS目录，用于存放Javascript文件。 图 2-3 新建目录 3.新建文件 新建文件与新建目录大同小异，在项目上点击右键依次选择 “新建”→“html文件”，命名为“index.html”,用于编写HTML代码;在CSS目录上点击右键依次选择“新建”→“css文件”，命名为“playMusic.css”

注意点： 1.overflow-x,overflow-y, 当两者不同时，一方被设置为visible，另一个被赋值为hidden、scroll、auto，那么这个visible会被重置为auto 2.overflow前提： （1）非display ：line （2）对应方位的尺寸限制 （3）对于单元格td等，还需要设置table的table-layout:fixed才行 3.IE7，button按钮，文字越多，按钮的padding越大，添加css样式overflow:visible就正常了。 4.无论什么浏览器，默认滚动条都来自于html，而非body。表现为：body默认margin0.5em，而有垂直滚动条的时候，滚动条是紧靠右边的，没有0.5em的间距 5.IE7-,默认滚动条一直出现，效果类似overflow-y:scroll,(overflow-y在IE8+才支持)，IE8+则是默认overflow-y:auto。故去除页面默认滚动条的时候，html{overflow:hidden}就行。 6.JS获取滚动条的高度 Chrome：document.body.scrollTop 其它：document.documentElement.scrollTop 而这两者在很多版本的浏览器不一定是同时支持的 所以：滚动条高度=document.body.scrollTop|

一、在同一样式表内 1.权值相同 　　就近原则（离被设置元素越近优先级越高） 2.权值不同 　　根据权值来判断css样式 　　哪种css样式权值高，就使用哪种样式 二、选择器权值 标签选择器：权值为1 类选择器和伪类：权值为10 id选择器：权值为100 通配符选择器：权值为10 行内样式：权值为1000 三、权值规则 统计不同选择器的个数 每类选择器的个数乘以相应权值 把所有的值相加得出选择器的权值 四、!important规则( 优先级最高 ) 可调整样式规则的优先级 添加在样式规则之后，中间用空格隔开 div{color:red !important;} 五、优先级 　　1、css使用方法的优先级 　　　　行内样式 > 内部样式 > 外部样式 　　　　（注：link链入外部样式和style内部样式优先级，取决于先后顺序） 　　2、样式表中优先级 　　　　id选择器 > class选择器 > 标签选择器 > 通配符 来源： https://www.cnblogs.com/zwtqf/p/9036130.html

1.CSS3边框： border-radius： CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow： CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888; border-image： CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round; 2.CSS3背景： **background-size： ** 规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-origin ： 规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。 3.CSS3文字效果： text-shadow： 在

前文 css包含许多东西，自己也知道在css方面基础不够扎实，本周的学习我计划从几个我自认为不足的方面进行学习，在css的基本语法方面我就不进行过多的学习了。然后在学习中的例子，保证自己亲手把代码打出来，不要只是复制粘贴，希望以此能记得牢一些。 CSS的命名与书写规范 我觉得在写网页的时候，书写规范是十分重要的，既能保证自己的清晰思路，也能让别人更好的看懂你的代码。但我对这方面也没重视过，当回去看自己原来的代码时，才发现有多么的头疼。所以自己总结了一下： css类在命名的时 大专栏 CSS的基础学习1 -命名与书写规范 候应该全用小写加中划线“-” 的方式，并分清父类与子类，让层次更加清晰 尽量用英文来概括你这一部分代码样式的含义，也有利于多学几个英文单词 然后避免class与id的重名，在js中id的命名十分重要，如果与class重名以后其实本身不会发生什么问题，主要怕搞混 CSS书写先后顺序 位置属性: display position top、right、bottom、left(顺时针) float clear z-index … 盒模型: margin padding width height … 文字等排版: color font content border background 来源： https://www.cnblogs.com/liuzhongrong/p

　　CSS选择 目录： CSS 元素选择器 CSS 选择器分组 CSS ID 选择器详解 CSS 类选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS 伪类 CSS 伪元素 1.CSS 元素选择器 div{ background: pink; } 2.CSS 选择器分组 * *{ background: pink; } 说明：选择所有元素 ， div,p{ background: pink; } 说明：选择所有 <div> 元素和所有 <p> 元素。 css 多类选择器 .important{ background: red; } .warning{ color : blue; } .important.warning{ border: 1px solid black; } <p class="important warning"> This paragraph is a very important warning. </p> 注： 1.class 的顺序可以不同，但是类名不能错2. .important.warning之间不能有空格 3.CSS ID 选择器详解 #div1{ background:pink; } <div id=’div1’></div> 注：id选择器在一个文档中只能出现一次，ID

这玩意主要将我们一些css3 的样式，加上前缀操作 css兼容性处理：postcss --> postcss-loader postcss-preset-env 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式 "browserslist": { // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], // 生产环境：默认是看生产环境 "production": [ ">0.2%", "not dead", "not op_mini all" ] } 上面是学习笔记，我们第一步先下载包 问大家一个问题，在 vscode 中，打开终端的命令是啥？ 答案是： ctr + ` __________________________________ 打开终端： 下载好之后，我们再修改下配置 写好后，在package.json 中也要配置 这些都copy 好之后，我们就可以试试了！ 我加了这句有兼容性的css 我们测试下！ 各位自动会加上前缀，到此 ，我们已经解决了，css

文章目录 CSS 属性选择器 属性选择器 属性和值选择器 属性和值选择器 - 多个值 设置表单的样式 CSS 属性选择器 对带有指定属性的 HTML 元素设置样式。 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。 注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。 属性选择器 下面的例子为带有 title 属性的所有元素设置样式： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title] { color : red ; } </style> </head> <body> <h1>可以应用样式：</h1> <h2 title= "Hello world" >Hello world</h2> <a title= "W3School" href= "http://w3school.com.cn" >W3School</a> <hr /> <h1>无法应用样式：</h1> <h2>Hello world<

css二倍图的使用 使用 CSS 的 DevicePixelRatio 媒查询属性 参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像 移动端项目中 @2x 图 和 @3x 图 的使用（需要支持css3） / 默认大小 / .photo {background-image: url(image100.png);} /* 如果设备像素大于等于2，则用2倍图 / @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min–moz-device-pixel-ratio: 2) { .photo { background-image: url(image200.png); background-size: 100px 100px; } } / 如果设备像素大于等于3，则用3倍图 */ @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min–moz-device-pixel-ratio: 3) { .photo { background-image: url(image300.png); background-size: 100px 100px; } } .photo {width:100px;height