CSS

最新推荐文章于 2022-11-04 17:38:22 发布

百事可爱-后悔下凡

最新推荐文章于 2022-11-04 17:38:22 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/weixin_42617917/article/details/102990867

版权

前端未分类笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

简述盒子模型 box-sizing 有哪些属性，作用

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

盒子模型有四个边界：
内容边界 Content edge、
内边距边界 Padding Edge、
边框边界 Border Edge、
外边框边界 Margin Edge。

标准盒模型 box-sizing: content-box
content-box:
width = content width;
height = content height

IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth

JS 如何获取盒子模型对应的宽高？能封装成一个通用的方法吗？

js盒子模型属性获取的结果是不带单位的，而且只能是整数（它会自动四舍五入）

1.width/height：

dom.style.width/height
(只适用获取内联元素，可读可写,设置宽高有且只有这种方式)
dom.currentStyle.width/height
(获取渲染后的宽高，计算样式为只读，仅IE支持)
window.getComputedStyle(dom).width/height
(可以获取元素上的所有CSS属性对象，与2原理相似，IE8以下不兼容)

2.client

dom.clientWidth/clientHeight ------ 获取width/height + padding ,如果有滚动条要减去滚动条
dom.clientTop/clientLeft ------ 获取（上/左）边框宽度

3.scroll

dom.scrollWidth /scrollHeight
获取对象内容宽高，没有内容溢出时和clientWidth/clientHight一样，
有内容溢出时为：内容实际宽/高 + 2*padding。
border，padding为0，可以用来获得子元素的整体宽高，包含margin。

获取width/height + padding + border(包含滚动条)：

4.offset

dom.offsetWidth/offsetHeight
dom.offsetLeft /offsetTop (获取box盒子相对它的父容器水平/垂直的偏移)

5.getBoundingClientRect()

这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。,ie9以上支持width/height属性
dom.getBoundingClientRect()…widht/height
兼容ie6~ie8的width/height的写法：
rectObject = dom.getBoundingClientRect();
rectWidth = rectObject.right - rectObject.left;
rectHeight = rectObject.bottom - rectObject.top;

封装成一个通用方法：

function getStyle(elem, prop,fakeNode) {
    if(window.getComputedStyle){
        return window.getComputedStyle(elem, fakeNode)[prop];
    }else{//低版本IE
        return elem.currentStyle[prop];
    }
}

CSS中 em ,rem vh,vw 分别怎么理解

em ,rem vh,vw 都为相对单位，用于响应式布局。
vw、vh、vmin、vmax 主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单。

em像素值：按自身字体大小计算，一般用来设置margin，padding，line-height，
使元素周围间距随字体比例缩放。
rem像素值：按根元素字体大小计算，用rem单位结合html元素设计页面响应时，
更改html字体大小建议使用em,或rem单位。这样跟元素还可以继承浏览器字体大小，
方便用户自行调整页面大小。
vh像素值：1vw等于视窗宽度的1%
vw像素值：vh等于视窗高度的1%

CSS中哪些属性可以继承

字体font 属性(包含 font-style, font-variant, font-weight, font-size 和 font-family )
文本系列属性(text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,color,direction)
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
光标属性：cursor

不可以继承的属性：

文本属性：vertical-align，text-decoration，text-shadow，white-space，unicode-bidi
盒子模型的属性：width、height、margin,border、padding、
背景属性：background(background-color、background-image、background-repeat、background-position、background-attachment)
定位属性：float、clear、position、top、right、bottom、left、min-width/height、max-width/height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline

BFC是什么？使用场景。

BFC 就是页面上的一个隔离的渲染区域，它会形成一个独立的空间，让空间中的自元素不会影响到外面的布局。
如何触发BFC：

float的值不为none。
overflow的值不为visible。（可以为auto，hidden或者scroll）
position的值不为relative和static。（flex ，absolute）
display的值为table-cell, table-caption，block或inline-block

使用场景：

解决浮动元素让父元素高度坍塌，触发BFC相当于清除浮动。
解决左右自适应布局
父元素触发BFC使子元素与外界元素隔离，可以解决外边距垂直方向重合问题。

让一个盒子在整个页面水平和垂直都居中的位置？如果不知道盒子的宽度和高度如何处理？

绝对定位，四个方向为0，margin：auto;
display: table-cell;text-align: center;vertical-align: middle;
display: flex;flex-flow: row wrap;align-items: center;justify-content: center;不用知道高度
绝对定位，top,left为50%，margin为-50%；
绝对定位，JS获取窗口宽高，盒子宽高，top,left为（Win-Box）/2
https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
https://blog.csdn.net/suwu150/article/details/78606234
https://www.cnblogs.com/joyco773/p/6049831.html
https://www.bbsmax.com/A/D854XR8V5E/
https://www.cnblogs.com/jiajialove/p/11558325.html
https://blog.csdn.net/liux6687/article/details/82812230
https://www.jianshu.com/p/6421cf2f6203
https://www.cnblogs.com/joyco773/p/6049831.html
如果让滚动条不占宽度
https://blog.csdn.net/e87e09e11/article/details/83001488

var cWidth, cHeight, sWidth, sHeight, sLeft, sTop;
		if (document.compatMode == "BackCompat") 
		{
			cWidth = document.body.clientWidth;
			cHeight = document.body.clientHeight;
			sWidth = document.body.scrollWidth;
			sHeight = document.body.scrollHeight;
			sLeft = document.body.scrollLeft;
			sTop = document.body.scrollTop;
		} 
		else // document.compatMode == "CSS1Compat"
		{
			cWidth = document.documentElement.clientWidth;
			cHeight = document.documentElement.clientHeight;
			sWidth = document.documentElement.scrollWidth;
			sHeight = document.documentElement.scrollHeight;
			sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft
					: document.documentElement.scrollLeft;
			sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop
					: document.documentElement.scrollTop;
		}

获取浏览器的宽高：

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

// 首先是取到元素
var main = document.getElementById(‘main’);
// 第一种方式
var mainWidth = main.offsetWidth,
mainHeight = main.offsetHeight;
// 第二种方式
var mainWidth2 = main.style.width,
mainHeight2 = main.style.height;