css3大小、定位、轮廓相关属性

1.大小相关属性

1.1 CSS3新增的box-sizing属性

box-sizing: content-box; -moz-box-sizing: content-box;

box-sizing: padding-box; -moz-box-sizing: padding-box;

box-sizing: border-box; -moz-box-sizing: border-box;

1.2 CSS3 新增的resize属性

resize: both;——指定可在两个方向上调整大小。

resize: horizontal;——指定只可在横向上调整大小。

resize: vertical;——指定只可在纵向上调整大小。

2.定位

3.轮廓相关

outline: rgba(50,50,50,0.5) solid 10px

宽度为10的灰色实线轮廓

outline: rgba(50,50,50,0.5) groove 16px

宽度为16的灰色凹槽线轮廓

outline: rgba(50,50,50,0.5) ridge 16px

宽度为16的灰色凸槽线轮廓

outline: rgba(50,50,50,0.5) ridge 10px;outline-offset:10px;

宽度为10、偏移距也为10的灰色虚线轮廓

时间： 2024-12-20 03:21:29

css3大小、定位、轮廓相关属性的相关文章

css中的大小、定位、轮廓相关属性

1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height.min-height用于设置最大最小的高度,当高度大于最大高度时将会被自动转换成最大 高度,同理最小高度也是一样: max-width.min-width用于设置最大最小的宽度,和高度一样,只要超过了规定值,就会自动被转 换成规定值: 2.css3新增的box-sizing属性 该属性可以设置3个值,content-box.padd

前端笔记十，大小、定位、轮廓相关属性

大小相关属性 height:用于设置对象的高度 max-height:设置对象的最大高度,如果该属性值小于min-height属性值,则自动转换为min-height的属性值 min-height:设置对象的最小高度 width:设置对象宽度 max-width:设置对象的最大宽度 min-width:设置对象的最小宽度 box-sizing属性:设置width,height控制哪些区域的宽度.高度:可使用值 content-box:设置的width,height控制元素的内容区的宽度和高度(只

定位的相关属性

定位方式相关属性 position 取值: 1.static : 默认,静态定位 2.relative : 相对定位 3.absolute : 绝对定位 4.fixed : 固定定位 2.与定位位置相关属性 top bottom left right 以像素为单位的值 3.堆叠顺序 z-index : value; 值越大越靠近用户 4.static 页面中默认定位方式,即文档流定位 5.相对定位 相对于当前元素本身出现的位置而实现定位的一种方式 实现方式: position:relative;

css3背景、边框、和补丁相关属性 （二）

背景 background : background-color || background-image || background-repeat || background-attachment || background-position 默认值为:transparent none repeat scroll 0% 0%. 设置对象的背景样式.如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置.例如: 设置 background : white 等于设置 b

css3背景、边框、和补丁相关属性

border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的默认值将采用文本颜色 相关属性: border-top,border-left,border-right,border-bottom:它们分别对边框的某个方向起作用,语法基本与border相同 border-bottom-color,border-top-color,border-bottom-co

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

CSS3景深、三维变换属性及旋转三维立方体的实现

浏览器坐标系 在讲正式语法之前,首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景 这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方向是面对于我们的 了解这个很重要,因为下面我们旋转元素需要借助它来理解 3D旋转 我们在平面中使用的旋转只是单纯的让元素在平面旋转一定角度 在三维旋转中稍微要复杂一下 属性当然还是用我们的transform 三维旋转有下面三个函数分别对应三个维度的旋转 rotateX(xxdeg

css中的背景、边框、补丁相关属性

关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的一些内容: background-attachment:用于设定背景图片是滚动的还是固定的,可以设定为scroll和fixed两种: background-position:用于设定背景图片的位置,可以设定为实际值,也可设定为百分比: background-repeat用于设定背景图片是否平铺,可以是纵向的也可以是横向的: css3新

cocos2dx 3.x以上(Sprite精灵类的相关属性与创建)

// //  MainScene.cpp //  helloworld // //  Created by apple on 16/9/19. // // #include "MainScene.hpp" Scene * MainScene::createScene() { auto scene = Scene::create(); //    CCScene * scene = CCScene::create();// 创建场景 //创建层 MainScene *layer = Ma