CSS大小、定位、轮廓属性

最新推荐文章于 2022-03-04 23:13:26 发布

山顶洞人95277

最新推荐文章于 2022-03-04 23:13:26 发布

阅读量257

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44567226/article/details/117687573

版权

大小相关属性
height 设置目标对象高度。百分比或者数值
max-height 设置目标对象的最大高度。如果此属性小于min-height属性的值，那么以min-height为准
min-height 设置目标对象的最小高度。如果此属性大于max-height属性的值，那么以max-height为准
width 设置目标对象宽度。
max-width 设置目标对象的最大宽度。如果此属性小于min-width，那么以min-width为准
min-width 设置目标对象的最小宽度。如果此属性大于max-width，那么以max-width为准

CSS3新增
box-sizing 设置width、height控制哪些区域的宽度、高度
		   content-box 设置width、height控制元素的内容区宽度和高度
		   padding-box 控制元素的内容区加内边距区的宽度和高度，仅Firefox支持，添加-moz-使用
		   border-box 控制元素的内容区加内边距区再加边框区的宽度和高度
		   
resize 指定是否允许用户通过拖动来改变元素的大小。
       none 不允许用户拖动改变组件大小。
	   both 不允许用户拖动改变组件的高度和宽度。
	   horizontal 不允许用户拖动来改变组件的宽度
	   vertical 不允许用户拖动来改变组件的高度
	   inherit 继承自父元素的resize属性值。这是默认值
resize属性对于所有设置了overflow的HTMLL组件游戏。

定位相关属性
position 设置目标对象的定位方式
absolute 允许将该对象漂浮与页面上，根本无需考虑它周围内容的布局
relative 保持对象在正常的HTML流中，目标对象的位置将参照前一个对象的位置进行定位
static 目标对象仅以页面作为参照系
z-index 设置目标对象的漂浮层的层序，该值越大，漂浮层越浮与上面。此属性仅当position属性值
为relative或absolue时有效。此属性对窗口控件（如select元素）没有影响
top 设置目标对象相对于最近一个具有定位设置的父对象的顶边偏移
right 右边偏移
bottom 底边偏移
left 左边偏移
以上四个属性仅当设置了对象的position属性为absolute和relative时有效

轮廓相关属性
outline 复合属性，可全面设置目标对象的轮廓颜色、线型、线宽三个属性
outiine-color 设置组件轮廓颜色
outline-syle 设置组件的轮廓线型。属性值和border的属性值相同
outline-width 设置目标组件的轮廓宽度
outline-offset 设置目标组件的轮廓偏移距（就是轮廓与边框之间的距离）
outline属性设置的轮廓并不占用页面控件，所以页面所显示的文字可以显示在轮廓上
小例子与代码

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="expires" content="1" />
    <title>大小、定位、轮廓属性</title>
    <style>
        #div1{
            width:70%;
            height:50%;
            border:1px solid #aaa;
            min-width:500px;
        }
        #div2{
            width:70%;
            height:50%;
            border:1px solid #aaa;
            max-width:800px;
        }
        #BoxSizing div{
            width:200px;
            height:100px;
            background-clip:content-box;
            border:20px solid #555;
            padding:20px;
        }
        #Resize div{
            width:200px;
            height:100px;
            border:2px solid #555;
            background-color:#eee;
            overflow:auto;
        }
        #Outline div{
            font-size:20px;
            height:60px;
            width:400px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div style="height:200px;width:100%;">
        元素宽高随着浏览器窗口缩放而改变
        <div id="div1">
            width:70%;height:50%;min-width:500px;
            高度是父元素的50%，宽度是父元素的70%，但最小宽度是500px。
        </div>
        <div id="div2">
            width:70%;height:80%;max-width:800px;
            高度是父元素的80%，宽度是父元素的70%，但最大宽度是800px。
        </div>
    </div>
    <br />
    <div id="BoxSizing">
        <br />
        <div style="box-sizing:content-box"></div>
        <div style="box-sizing:border-box"></div>
    </div>
    <div id="Resize">
        <div style="resize:both">resize:both——指定可在两个方向上调整大小</div>
        <div style="resize:horizontal">resize:horizontal——指定只可在横向上调整大小</div>
        <div style="resize:vertical">resize:vertical——指定只可在纵向上调整大小</div>
    </div>
    <div id="Outline">
        outline:rgba(50,50,50,0.5) solid 10px;
        <div style="outline:rgba(50,50,50,0.5) solid 10px;">
            宽度为10的灰色实线轮廓
        </div>
        <br />
        outline:rgba(50,50,50,0.5) groove 16px;
        <div style="outline:rgba(50,50,50,0.5) groove 16px;">
            宽度为16的灰色凹槽线轮廓
        </div>
        <br />
        outline:rgba(50,50,50,0.5) ridge 16px;
        <div style="outline:rgba(50,50,50,0.5) ridge 16px;">
            宽度为16的灰色凸槽线轮廓
        </div>
        <br />
        outline:rgba(50,50,50,0.5) ridge 10px; outline-offset:100px;
        <div style="outline:rgba(50,50,50,0.5) ridge 10px; outline-offset:10px;">
            宽度为10、偏移距也为10的灰色虚线轮廓
        </div>
    </div>
</body>
</html>

山顶洞人95277

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS大小、定位、轮廓属性

大小相关属性height 设置目标对象高度。百分比或者数值max-height 设置目标对象的最大高度。如果此属性小于min-height属性的值，那么以min-height为准min-height 设置目标对象的最小高度。如果此属性大于max-height属性的值，那么以max-height为准width 设置目标对象宽度。max-width 设置目标对象的最大宽度。如果此属性小于min-width，那么以min-width为准min-width 设置目标对象的最小宽度。如果此属性大于max-
复制链接

扫一扫