css笔记

最新推荐文章于 2024-10-02 12:08:27 发布

　　～

最新推荐文章于 2024-10-02 12:08:27 发布

阅读量35

点赞数

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/yhahab/article/details/131923087

版权

01.盒子模型

<!-- 盒子大小： content

padding（内边距）

/* padding-top: 20px;

padding-left: 20px;

padding-right: 20px;

padding-bottom: 20px; */

padding: 20px;

/* 两个值时，第一个值待变上下的padding值，第二个值代表左右的padding值 */

padding: 10px 50px;

/* 三个值：上左右下 */

padding: 10px 40px 50px;

/* 四个值：上右下左 */

padding: 10px 20px 30px 40px;

/* padding的值不能为负值 */

/* 行内元素的左右内边距可以准确设置 */

span {

background-color: pink;

padding-left: 20px;

padding-right: 20px;

padding-top: 20px;

padding-bottom: 20px;

border（边框）

border: 20px solid black;

margin（外边框）

margin-bottom: 20px;

margin-right: 20px;

margin-left: 20px;

margin-top: 40px;

/* 上右下左 */

margin: 10px 20px 30px 40px

/* 实现元素的水平居中 */

margin: 0 auto;

05.外边距塌陷

/* 父盒子里，第一个子盒子的margin-top值会被父盒子抢掉*/

margin-top: 200px;

父盒子边距会变大，而第一个不会改变

解决办法

/* 1、给父元素加边框 */

/* border: 1px solid black; */

/* 2、给父元素添加内边距 */

/* padding: 10px; */

/* 3、overflow: hidden; 偏方 */

overflow: hidden;

06.避免padding将盒子撑大

/* 解决padding影响盒子大小 */

box-sizing: border-box;

07.flex布局

display: flex;

/*变成弹性盒子，可以在一行显示*/

/* 改子元素排列方式 */

/* flex-direction: row-reverse; */ 后往前

/* flex-direction: column; */ 沿着列排

/* flex-direction: column-reverse; */ 沿着列反向排列

/* 改变主轴对其方式 */

/* space-between:两边贴边，中间平分剩余空间 */

justify-content: space-between;

/* space-around：平分在子项的两边 */

/* justify-content: space-around; */

/* justify-content: space-evenly; */

/* justify-content: center; */全放在中间

/* 允许换行 */

元素太多的时候

flex-wrap: wrap;

/* 侧轴单行 */

align-items: center;

/* 侧轴对齐方式 */

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

/* background-color: red; */

/* order 值越小，排列越靠前没有设置的子项目，默认为0 */

order: -1;

08.去除默认标签的外边距

在<style>里面设置

body {

margin: 0;

}

无序列表去除外边距

ul {

margin: 0;

padding: 0;

}

通配符选择所有去除外边距

* {

margin: 0;

padding: 0;

}

09.字体

<style> @font-face （引入字体）{

font-family: 名字;

src: url(./翩翩体-简.ttf);

}

10.渐变

<style>

div {

width: 300px;

height: 300px;

background-image: linear-gradient(to right, red, pink, green, blue);渐变

background-image: repeating-linear-gradient(45deg, yellow, pink, red);重复线性渐变

background-image: radial-gradient(red, pink, blue, greenyellow);镜像渐变

}

</style>

11.css继承性

/* 会继承的css属性：字体属性、文本属性、文字颜色…… */

/* 不会继承的：边框、背景、内外边距、宽高…… */

12.浮动

img {

/* 文字环绕 */

/* 左浮动 */

float: left;

width: 100px;

}

p {

/* 清除浮动 */

clear: both;

}

13.2D转换

/* 移动 */

/* transform: translateX(200px) translateY(100px); */

/* transform: translateY(100px); */

/* 单独写会发生覆盖，复合：x ，y */

/* transform: translate(50px, 50px); */

/* 旋转 */

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

/* 缩放 */

/* transform: scaleX(1.5) scaleY(2); */x轴Y轴

/* transform: scale(0.5); */全部

/* transform: translateX(100px) translateY(100px) rotateZ(45deg); */

/* transform: scale(0.5) translate(100px, 100px) rotateZ(45deg); */

/* 改原点对移动无影响，对旋转、缩放有影响*/

transform-origin: top left; transform: scale(0.5);

14.3D转换（z轴旋转）

/* 移动 */

transform: translateZ(-200px);

/* 旋转 */

transform-origin: left;

transform: rotateX(45deg);

transform: rotateY(45deg);

/* transform: scaleZ(2); */

/* 背部可见性 */

backface-visibility: hidden;