CSS
文章平均质量分 50
自身学习css的一些经历与总结
学学学无止境
热爱技术与生活。
展开
-
窗口缩放导致页面排版错乱的解决方法
窗口缩放导致页面排版错乱的解决方法简单的说就是设置body的宽度,那么如何动态的获取浏览器减去侧边滚动条之后的宽度,原理就是通过创建一个带有滚动条的div(也就是overflow:scroll),利用offsetWidth-clientWidth得到滚动条的宽度,再利用window.screen.availWidth减去滚动条的宽度即可得到浏览器除了滚动条以外的宽度,body再设置该宽度,即可解决缩放排版错乱的问题,代码展示如下function setBodyWidth(){ var barWi转载 2021-03-22 11:28:05 · 1643 阅读 · 0 评论 -
PC端与移动端视口问题
一、 移动端由于移动端得默认视口是980px(css像素)默认情况下,移动端得像素比是 980/移动端宽度如ip6s得宽度为750,则其像素比为980/750因此若我们直接在网页中写移动端代码,这样在980得视口下,像素比非常不友好,即导致页面中得内容非常非常小(因此此时1css像素~1.3333066个物理像素,因此在默认情况下,对于w750px的ip6s,你设置w:900时是不能沾满整个屏幕的,因此此时的视口为980px,因此对于固定物理像素宽的手机,如何调节,使得显示效果合适呢?)----编原创 2020-11-20 16:32:50 · 646 阅读 · 0 评论 -
scrollWidth,clientWidth,offsetWidth的区别
scrollWidth,clientWidth,offsetWidth的区别通过一个demo测试这三个属性的差别。说明:scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。该demo就在页面中放一个textarea元素,采用默认宽高显示。情况1:元素内无内容或者内容不原创 2020-12-06 08:50:00 · 335 阅读 · 0 评论 -
自适应布局
常见的自适应布局又以下两种:1.左列固定右列自适应说明:左列固定右列自适应,也可以右列固定左列自适应<div class="container"> <div class="left">固定宽度</div> <div class="right">自适应</div></div>实现:方式1:子元素float:left思路:左列固定列设置为float:left(设置固定宽度),右列自适应设置为float:non原创 2020-12-01 19:12:48 · 5041 阅读 · 2 评论 -
伪类与伪元素的区别与使用
说在前面:伪类 前面是一个冒号, 伪元素 前面是两个冒号(CSS3之前是一个冒号,CSS3后变成两个冒号,用于区分)伪元素: 模拟添加一个元素,来实现某种效果伪类:作用于标签(状态本身)一、伪元素(使用双冒号 :: )1.伪元素主要用来创建一些不存在在原dom结构树中的元素,例如使用 ::before和 ::after在一些已经存在dom结构树中的元素添加文字样式等。这些添加的内容会以具体的UI现实出来,被用户所看待,但是这些内容不会改变文档的内容,不会出现在dom中,不可赋值,仅在CSS渲染层加原创 2020-12-01 17:26:38 · 482 阅读 · 0 评论 -
求背景图片左边到#box盒子左边外侧的距离
题目1:求背景图片左边到#box盒子左边外侧的距离 <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 200px; background-color: pink; padding: 100px; border: 80px solid blue; background-image: url('原创 2020-11-28 17:20:29 · 281 阅读 · 0 评论 -
1物理像素的实现
1.对于1物理像素问题(不会出现在pc端,因为pc的像素比永远为1,而物理像素为1时,此时css自然为1),因此你写的css像素和物理像素永远时一对一的关系像素比=物理像素/css像素2.在移动中,不同设备其dpr即像素比不一样,可为2、3等,因此当你在dpr为2的移动端设置1px的css像素时,对应2物理像素,因此会达不到我们想要的效果3.解决–通过操作meta标签上的缩放比(即initial-scale)当initial-scale为1时,表示没有进行任何的缩放,而现在我想要把1px的css原创 2020-11-28 13:42:42 · 755 阅读 · 0 评论 -
解决移动端适配方法总结
常用的解决移动端布局的方案大概有:1.flex弹性布局2.百分比3.rem布局4.用框架搭建页面5.通过meta标签中的viewport6.媒体查询media百分比布局百分比布局采用百分比设置元素宽高flex布局父级元素设置display:flex子级元素通过flex参数来设置缩放比例,缩放条件、排列方式等缺点:具有兼容性问题rem布局这里提供两种思路:思路11)设置根节点字体大小为(为了方便,可以灵活设置:16、32、100等),布局时使用原px/@rem得出r原创 2020-11-28 10:36:59 · 10315 阅读 · 1 评论 -
如何rem解决移动端适配问题?
解决移动端适配问题方法一:使用rem准备:在实际开发中,一般设计稿都是给定的,而且设计稿中的元素的大小也是给定px值的,比如一般给定设计稿适应的屏幕宽度为750px;问题:ui设计师给定的设计稿是在移动设备屏幕为750px下的显示效果,而针对于使用不同设备的用户,其显示屏幕宽度必然是不同的,因此我们需要根据ui设计图做相应的适配;思路:假设一个元素宽度为200px,那么我要是的这个为w:200px的元素在750px设备和375px(或者其他设备)上显示的效果一样可以得到x=100,但是这只是针对原创 2020-11-28 09:16:24 · 1420 阅读 · 0 评论 -
css中神奇的盒模型-----(box-sizing:border-box)
背景:先声明一下运用的场景,假如项目布局使用的是自适应的布局方式,div给出的宽度是百分比的形式,即框占窗口宽度的50%,但边界和内边距是用像素来表示的怎么办?为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来将框模型更改成这个新的模型。注意:回顾一下,框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和,这就是造成上述背景下,样式不好调整的原因。box-sizing属性用于更改原创 2020-11-26 11:04:26 · 3389 阅读 · 0 评论 -
11-4定位的小应用(京东)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/rese原创 2020-11-25 18:08:46 · 89 阅读 · 0 评论 -
11-1定位之相对定位
相对定位一、 定位:定位是一个更加高级的布局手段通过定位可以将元素拜访到也买你的任意位置使用positon属性来设置定位二、 相对定位1.-当元素的position属性值设置为relative时则启动了元素的相对定位2.-相对定位的特点2.1.相对定位特点1元素开启相对定位之后,如果不设置偏移量元素不会发生任何变化2.1.1.偏移量(offest)当元素开启了定位之后,可以通过偏移量来设置元素的位置top:定位元素和定位位置上边的距离bottom:定位元素和定位位置下边的距原创 2020-11-25 18:06:31 · 615 阅读 · 0 评论 -
10-4(对10-1到10-3的综合)---解决浮动的总结
将清除浮动与清除外边距问题综合 .clearfix::before, .clearfix::after{ content:''; display: table; clear:both; }使用:当某个元素需要消除浮动时,则在该元素加上类名为class=“clearfix”即可消除外边距问题同理如:...原创 2020-11-25 18:05:50 · 112 阅读 · 0 评论 -
css中的浮动float
浮动浮动的相关说明:通过浮动可以使一个元素向其父元素的左侧或者右侧移动使用float属性来设置元素额浮动可选值:none:默认值,元素不浮动left:元素向左移动right:元素向右移动注意:1).元素设置了浮动之后,水平布局的margin-left+border+padding-left+…+…这个等式不需要成立,即此时浏览器不自动调节2).元素设置浮动后,会完全脱离文档流,即不会再占用文档流的位置,因此还在文档流中的元素会自动向上移动浮动的特点:1) 浮动的元素会脱离文档流,不原创 2020-11-25 18:00:13 · 119 阅读 · 0 评论 -
css的盒子模型
盒子模型• 块级盒子o 盒子的组成 1.边框–border2.外边距–margin3.内边距–padding4.内容–content 盒子的可视化大小=content+padding+border 即content、border、padding会影响盒子得实际大小, 而margin不影响盒子的可视化大小, 但是会影响盒子的实际的占用大小• 1.content内容区o 1.在设置一个元素时,设置的width和heigth实质上设置的就是content的大小2.元素中所有的子元素和文本原创 2020-11-20 16:42:12 · 226 阅读 · 0 评论 -
在css中给元素添加id或者class指定属性的区别
id属性id属性具有唯一值。也就是说在一个网页中相同的id只能出现一次。W#C建议,对于网页关键的结构或者大结构,我们才用id。关键结构如:LOGO、盗汗、主题内容、底部信息栏等。对于一些小地方,还是就建议使用classclass属性如果你想为两个或者两个以上额元素定义相同的样式,那么建议使用class、可以减少大量重复的代码...原创 2020-11-20 16:41:23 · 813 阅读 · 0 评论 -
CSS浮动float的导航栏小案例总结
Document HTML/CSS Border YTY Service DSV BDRHFZB HDSNVKIS HDSVAERBSJPS asdvNSNBI ![在这里插入图片描述](https://img-blog.csdnimg.cn/202010...原创 2020-10-27 18:29:34 · 486 阅读 · 0 评论 -
css中垂直外边距的折叠问题
一、垂直外边距得重叠(折叠)****************注意时垂直方向相邻得垂直方向外边距会发生重叠–兄弟元素–兄弟元素间得相邻垂直外边距会取两者之间得较大值(两者都是正值得时候)特殊情况:1)如果一正一负,取两者得和2)均为负,取两者中绝对值较大得–这个问题对开发者有利,不需要解决.box1{margin-bottom:100px;}.box2{margin-top:200px}-----此时外边距会重叠–父子元素-父子元素间相邻外边距,子元素得会传给父元素(子元素原创 2020-11-20 16:43:19 · 141 阅读 · 0 评论 -
css中的文档流
1.文档流文档流是一个多层的结构,一层摆着一层-通过CSS可以分别为每一层设置样式-作为用户只能看待文档流的最顶上一层-这些层中,最底下的一层称为文档流,文档流是网页的基础我们所创建的元素默认是在文档流中进行排列-对于我们的元素主要有两种状态在文档流中脱离文档流2.元素在文档流中的特点:2.1 块级元素:1)块级元素默认在页面中独占一行(自上向下排列)2)默认宽度是父元素的全部(即会把父元素撑满)3)默认高度是根据内容而定(子元素)2.2 行内元素1)行内元素不会独占页面的一行原创 2020-11-20 16:42:45 · 637 阅读 · 0 评论 -
CSS样式的继承性
一、在css中,具有继承性的属性有三大类1.文本相关属性:font-family、font-size、font-style、font-weight、font、line-hight、text-align、text-indent、word-spacing2.列表相关属性:list-style-image、list-style-position、list-style-type、list-style3.颜色相关的属性:color注意:元素自身属性特征与继承之间优先级之间的关系----即体现样式的叠层性原创 2020-11-20 16:39:35 · 612 阅读 · 0 评论