CSS3盒子模型

E___V___E

已于 2024-02-21 14:53:22 修改

阅读量354

点赞数 8

文章标签：前端 html

于 2024-02-19 15:30:42 首次发布

本文链接：https://blog.csdn.net/E___V___E/article/details/136168070

版权

本文详细介绍了CSS3中的box-sizing属性、border-box模式的应用，以及如何使用filter进行图形效果处理。还涵盖了transition和transform用于实现元素的平滑过渡和变换，包括定位、缩放和移动技巧。最后提到学生免费服务器资源和FTP激活方法。

摘要由CSDN通过智能技术生成

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1． box-sizing：content-box 盒子大小为width＋padding＋border（以前默认的）

2． box-sizing：border-box 盒子大小为width

如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter：函数（）；

例如：filter：blur（5px）；blur模糊处理数值越大越模糊

盒子

需要子元素永远父元素小30px

可以使用+-/*

<style>
.father{

width: 300px;
height: 200px;
background-color:pink; }

.son {

/* width: 150px; */

/* width: calc(150px + 30px); */ width: calc(100% - 30px);


height: 30px;

background-color:skyblue; 

</style> 
</head> 
<body>

＜！——需求我们的子盒子宽度永远比父盒子小30像素——＞
<div class="father">

<div class="son"></div> </div>

</body> 
</html>

过渡

transition：要过渡的属性花费时间运动曲线何时开始；

1．属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。

2．花费时间：单位是秒（必须写单位）比如0.5s

3．运动曲线：默认是ease（可以省略）

4．何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）

可以transition：width：10px；.5s ease 1s，height：10px；.5s ease 1s；

transition:all .5s;

进度条

<style>
.bar{
width: 150px;
height: 15px;
border: 1px solid □red; 
border-radius: 7px; 
padding: 1px;
}
.bar_in { 
width: 50%; 
height: 100%; 
background-color:red; 
transition：all .7s；
}

.bar:hover .bar_in {
width: 100%;
}
</style>

</head> 
<body>

<div class="bar">

<div class="bar_in"></div>
</div>

华为阿里云有学生free服务器额度 TX没有

http://free.3v.do/

激活FTP

cuteftp

2D 转换之移动 
translate 2D 移动是 2D换里面的一种功能，可以改变元素在页面中的位置，类定位
1 ．语法 transform: translate ( x , y ) ；
2.或者分开写 transform ：translateX (n);

<style>

div {

width: 500px; height:500px; background-color:pink;

／＊1． 我们tranlate里面的参数是可以用％＊／

／＊2．如果里面的参数是％移动的距离是盒子自身的宽度或者高度来对比的＊／
／＊这里的50％就是 50px 因为盒子的宽度是100px＊／

/* transform: translateX(50%);*/ 

p{

width: 200px; height:200px; background-color:purple; }

</style>

定位可以换成以下实现居中

p{

position: absolute;

top:50%; left:50%; width: 200px; height: 200px;

background-color: purple; /* margin-top: -100px; margin-left:-100px;*/

transform: translate(-50%, -50%);

}

2D转动

transform:rotate(45deg)

img{width:150px;transform:rotate(45deg);}即可等比例缩放并旋转45度

<style>

img {

width: 150px;

／＊顺时针旋转45度 ＊／

/* transform: rotate(45deg); */ 

border-radius: 50%;

border: 5px solid pink;

／＊过渡写到本身上，谁做动画给谁加＊／
transition: all 0.3s;

}

img:hover {

transform: rotate(360deg); }

</style>

小三角（感觉不实用）

div{
position: relative; 
width:249px;
height: 35px;
border: 1px solid #000;
}

div::after {

content:"";

position: absolute; 

top:8px;

right:15px; 
width: 10px; 
height: 10px;

border-right: 1px solid □#000; 
border-bottom: 1px solid □#000; 
transform: rotate(45deg);

transition: all 0.2s;
}
／＊鼠标经过div 里面的三角旋转＊／
div:hover::after{
    transform:rotate(225deg);
}

设置2D转换中心点

/*1 •语法
transform-origin: x y;
2 .重点

   •    注意后面的参数X和y用空格隔开
   •    xy默认转换的中心点是元素的中心点(50% 50%)
   •    还可以给x y设置像素或者 方位名词(top bottom left right center)*/


<style>
    div {
       width: 200px;
       height: 200px;
       background-color: ・pink;
       margin: 100px auto;
       transition: all Is;
       /* 2•可以跟方位名词*/
       /* transform-origin: left bottom; */
       /* 2.默认的是 50% 50% 等价于 center center */
       /* 3.可以是px像素*/
       transform-origin: 50px 50px;
    }

    div:hover {
       transform: rotate(360deg);
    }
</style>

2D缩放

div{
width: 200px;
height: 200px;
background-color: ・pink;
margin: 100px auto;
/* transform-origin:雄ft bottom; */
}

div:hover {
   /* 1.里面写的数字不跟单位就是倍数的意思1就是工倍2就是2倍*/
   /* transform: scale(x, y); */
   /* transform: scale(2, 2); */
   /* 2.修改了宽度为原来的2倍 高度不变*/
   /* transform: scale(2, 1); */
   /* 3.等比例缩放同时修改宽度和高度，我们有简单的写法 以下是宽度修改了2倍，高度默认和第一
   个参数一样*/
   /* transform: scale(2); */
   /* 4.我们可以进行缩小 小于1就是缩放*/
   /* transform: scale(0.5, 0.5); */ T
   /* transform: scale(0.5); */
   /* 5. scale的优势之处：不会影响其他的盒子而且可以设置缩放的中心点*/
   /* width: 300px;
   height: 300px; 
   transform: scale(2);
}

transform:scale(1,1):玄和高都放大TS ,相对于没有放大
transform:scale(2,2):责和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform:scale(0.5,0.5):缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

变化按钮

1234567

<style>
li {
float: left;
v/idth: 30px;
height: 30px;
border: 1px solid  pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer; 
transition: all .4s;
}
li:hover {
transform: scale(l.2);
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>

综合

1.因为默认是顺时针同时使用多个转换，其格式为：transform: translateO rotateO scaleO ..# ,

2其顺序会影转换的效果（先旋转会改变坐标轴方向）

3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/*我们同时有位移和其他属性，我们需要把位移放到最前面*/ I
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>

E___V___E

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1． box-sizing：content-box 盒子大小为width＋padding＋border（以前默认的）2． box-sizing：border-box 盒子大小为width。
复制链接

扫一扫