CSS03

最新推荐文章于 2024-06-13 09:45:33 发布

LongMidnight

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量90

点赞数

分类专栏： Web Developer Camp 文章标签： css

本文链接：https://blog.csdn.net/qq_34466250/article/details/117464009

版权

Web Developer Camp 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS盒子模型（CSS Box Model）

宽和高（Width &Height）

盒子：
在这里插入图片描述

盒子模型

Width &Height：内容盒子的宽和高

div{
    width: 200px;
    height: 250px;
    background-color: rgb(30, 219, 109);//指挥在content area里面才会有显示
}

在这里插入图片描述

边界和边界角（border & border radius）

包含若干属性：圆角，边界颜色，边界厚度

边界属性：

在这里插入图片描述

border：

#one{
    background-color: cyan;
    border-width: 5px;
    border-color: darkblue;
    border-style: solid;
    box-sizing: border-box;//整个border大小为200px*250px，而不是content，这样不会再200px的基础（content box）上加10px（两边边框）=210px（border box）
}

在这里插入图片描述

#two{
    background-color: rgb(214, 54, 148);
    border-color: darkmagenta;
    border-width: 3px;
    border-style: dashed solid;//上下边和左右边不同
    border-left-width: 8px;//不同边厚度
}

在这里插入图片描述

#three{
    background-color: rgb(236, 205, 24);
    border: 4px solid black;
    border-left-style: dotted;//先设置上一行，在按需设置
}

在这里插入图片描述

border radius圆角

#three{
    background-color: rgb(236, 205, 24);
    border: 4px solid black;
    border-left-style: dotted;
    border-radius: 20%;
}

在这里插入图片描述

padding(填充)

在content和border之间

在这里插入图片描述

绿色的部分就是填充

在这里插入图片描述

h1{
    background-color: crimson;
    width: 100px;
    padding-left: 100px;
    padding-top: 50px;
}
button{
    padding: 20px;
    padding: 10px 20px; /*纵向和横向 */
    padding: 10px 20px 20px 10px; /*上右下左*/
}//如下图

在这里插入图片描述

margin（外边距）

元素之间的距离：

在这里插入图片描述

*和padding用法类似

最开始内容和页面有个间距8px，可以设置为0

body{
    margin: 0%;
}
h1{
    ...
    margin-bottom: 0;
}

在这里插入图片描述

display属性

在这里插入图片描述

改变元素显示类型

h1{
    background-color: palegoldenrod;
    border: 1px black;
    display: inline;//原来为block element，改为inline element
}

span{
    background-color: palegoldenrod;
    border: 1px black;   
    display: block;//原来为inline element，改为block element
}

在这里插入图片描述

inline 元素：宽高设定无用，填充和外边距只对纵向有用

block 元素：宽、高填、充和外边距，都有用，但是block元素不能同行

inline-block元素：宽、高填、充和外边距，都有用，同行

如果不想让一个元素出现：display：none；

CSS的长度单位们（units）：

%：

//父容器尺寸的？%
<section>
        <div></div>
</section>
---------------------
section{
    background-color: cadetblue;
    width: 50px;
    height: 50px;
}

div{
    background-color: rgb(107, 95, 160);
    width: 50%;
    height: 50%;
}

在这里插入图片描述

//元素字体大小的%？
h1{
    font-size: 40px;
    border: 1px solid black;
    line-height: 300%;//高度是字体大小的三倍：120px
}

在这里插入图片描述

em

article{//父
    font-size: 30px;
}
p{//子
    font: 2em;//父的2倍60px
}

如果是外边距或者填充，就是本身字体大小的？倍

article{//父
    font-size: 30px;
}
h1{//子
    font: 2em;//父的2倍60px
    margin-left:3em;//自己字体大小的3倍：180px
}

rem

em的缺陷：比如列表多层嵌套，里面的表是外面的em倍，所以多层列表的数据会大小不一致:

ul{
	font-size:0.7em;
}

在这里插入图片描述

rem：源自html根元素的字体大小，其他元素的字体根据根元素字体大小变化

html{			\\html根元素的字体大小
	font-size:10px
}

总结：em常用在跟随字变化的元素上，比如button：填充和外边距设定；rem用在内容文字上，跟随html根元素变化。

其他的属性(property)

透明度opacity&alpha 通道

alpha通道

rgba(0,209,112,0.5)——最后一位是alpha(0-1)——只会影响他所修饰的元素：

<section>
     <div id="rgba">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptates quam facere, magnam
     </div>
</section>
--------------------------------------------
#rgba{
    width: 250px;
    height: 250px;
    background-color: rgba(255,255,255,0.7);
    //16进制时最后两位00-FF来说明透明度
}

在这里插入图片描述

透明度

和alpha通道不同，会调节所有的元素（自己和从属于自己的）透明度

#opacity{
    width: 250px;
    height: 250px;
    background-color: yellow;
    opacity: 0.5;//包括里面的字或者其他元素都会变透明
}

在这里插入图片描述

position（位置属性）

此属性设定一个元素在doc中的位置，配合使用top、right、bottom和left

position: static;//此语句不能使用top、right...

position: relative;
top: 40px; left: 40px; //在相对于默认位置移动

在这里插入图片描述

position: absolute;
top: 40px; left: 40px;\\此时图片不占位置，他的位置相对于上一层父容器，如果没有父容器，位置就相对于最开始有的容器，比如body容器

position: fixed;
top: 40px; left: 40px;\\有点想absolute，此时图片不占位置，位置就相对于最开始有的容器，比如body容器。当滑动页面时，也会固定在页面上
*可以用在导航栏

在这里插入图片描述

position: -webkit-sticky;
position: sticky;
top: 20px;//元素在原位，但随你滑动

transition（转变）

实现1s变形

在这里插入图片描述

转变能指定：属性名|持续时间|时间函数|延迟

.circle {
    width: 300px;
    height: 300px;
    background-color: magenta;
    transition: background-color 1s ease-in 1s, border-radius 2s;//只有背景色1秒变，其他属性瞬间变，也可写all代表所以属性。边界圆角2秒变，用逗号隔开。时间函数是指1或2秒变化的方式，这里用的是ease in
}

时间函数分开写：
div:nth-of-type(1){
    transition-timing-function: ease-in;
}
div:nth-of-type(2){
    transition-timing-function: ease-out;
}
div:nth-of-type(3){
    transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}

Easing Functions Cheat Sheet (easings.net)

transform（变形）

h1 {
    background-color: #2a9d8f;
    border: 5px solid #264653;
    color: #eae2b7;
    padding: 0.7em;
    width: 300px;
    font-size: 1.8em;
    text-align:center;
    margin: 20px auto;//纵向20px，横向居中常用
    font-family: Courier New;
    font-weight: lighter;
}

旋转：并且选择基点

section:first-of-type h1:nth-of-type(1){
    /* transform-origin: top right; */
    transform: rotate(45deg);
}

scale：按比例改变大小

section:first-of-type h1:nth-of-type(2){
    transform: scale(0.6);
    transform: scale(2,1);宽变两倍，高不变 
}

translate ：移动

section:first-of-type h1:nth-of-type(3){
    transform: translateX(200px);//x向移动
}
section:first-of-type h1:nth-of-type(4){
    transform: translate(-100px, 50px);//x移动，y向移动
}

skew：扭曲

section:nth-of-type(2) h1:nth-of-type(1){
    transform: skew(30deg);//x向倾斜30度
    transform: skew(30deg，20deg);//x向倾斜30度，y向倾斜20度
}

在这里插入图片描述

以上效果可以叠加：

section:nth-of-type(2) h1:nth-of-type(3){
    transform: rotate(-20deg) scale(1.3);
}
section:nth-of-type(2) h1:nth-of-type(4){
    transform: translateX(-500px) rotate(0.5turn) scaleY(1.5);
}

对一个section的元素施加：

section:nth-of-type(2) {
    transform: scale(0.7) translateX(500px);
}

让按钮更好看

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #151ff1;
}


button{
  background: none;
  color: coral;
  border: 2px solid;
  padding: 1em 2em;
  font-size: 1em;
  transition: all 0.2s;//转变放变前的选择器中
}

button:hover{
  border-color: greenyellow;
  color: cornsilk;
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 0.5em 0.5em -0.4em yellow;
  transform: translateY(-0.25em);
   cursor: pointer; /*挪到按键上，光标变形 */
  
}

在这里插入图片描述

关于背景

section {
    width: 80%;
    height: 800px;
    /* background-image: url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");
    background-size: cover; 图片过大会裁剪部分进来，如果是contain会保留全部图片，空的地方会重复图片，这就又一个属性：backgroud-repeat
    background-position: top; 背景图片选哪儿开始选取*/
    background: center/cover url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");
    /* 背景尺寸需在位置后用/包括，如上 */
    
    background: center/40% no-repeat blueviolet url("https://images.unsplash.com/photo-1564442038901-4f9a19d3d456?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1227&q=80");
    margin: 0 auto;
}

摄影博客练习

css:

img{
    width: 30%; //一个图占父容器的30%，所以一行放3个，还有10%用来分配成空白
    /* margin: 1.66666%;*/
    margin: calc(10%/6);
}
nav{
    font-family: 'Raleway', sans-serif;
    /* 字体不能因缩放而变 */
    font-size: 1.5em;
    text-transform: uppercase;
    border-bottom: 2px solid rgb(226, 135, 135);
    /* 没有margin，没有和图片对齐 */
    width: 30%;
    /* 因此加个左边的外边距 */
    margin-left: calc(10%/6);
    padding: 1.5em 0em;

}

html:

 <!-- Massimo Margagnoni -->
    <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"><img
        src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"><img
        src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">
    <!-- 这么写是因为如果一行一个，每个元素之间实际上还有一个空格元素 -->

伸缩盒flexbox

概述

如何在容器内分配空间，当浏览器缩小时，如何分配元素所占的空间

伸缩方向（flex direction）

在这里插入图片描述

盒子的主轴是x轴，默认是x轴，设置容器 display：flex后，容器的元素首先x轴从左到右摆放；如果设置flex-direction: row-reverse;，元素在x轴上从右向左摆放。

设置flex-direction: colum和flex-direction: -reverse后的效果就是从y轴上了

flex-direction后的就是主轴

内容对齐（justify-content）

元素在主轴上如何分布，默认justify-content: flex-start;元素整体偏开始端；justify-content: flex-end;整体偏结束端

center 中心分布
space-between将content容器内的空间均分在元素之间，但容器和元素之间无空
space-around 将content容器内的空间均分在元素之间，但容器和元素之间有空
space-even 将content容器内的空间均分在元素之间，但容器和元素之间有空，空等距

自动换行（flex-wrap）

nowrap
wrap：换行，如果主轴是横向的，就向下（纵向）换行；如果主轴是纵向的，从左到右换行。
wrap-reverse：换行，如果主轴是横向的，从底开始，向上（纵向）换行；如果主轴是纵向的，从右到左换行。

*wrap-reverse会让从轴颠倒

对齐项目（align item）

justify-content决定主轴分布，align item决定从轴分布

默认align-item: flex-start;元素整体偏开始端，也就是从上到下；align-content: flex-end;整体偏结束端，从下到上

center 中心分布
baseline 文字底端对齐如下

在这里插入图片描述

对齐内容（align content）

colum：控制列距

row：控制行距

默认align content: flex-start;元素整体偏主轴开始端；align content: flex-end;整体偏主轴结束端

center 中心分布（无缝聚集在中间）
space-between将content容器内的空间均分在元素之间，但容器和元素之间无空
space-around 将content容器内的空间均分在元素之间，但容器和元素之间有空
space-even 将content容器内的空间均分在元素之间，但容器和元素之间有空，空等距

align-self（独自对齐）

常用在单个元素上

center
flex-end
flex-start

变大变小

初始大小：flex-basis，规定的是主轴方向的尺寸，和width不一样

规定元素占用多少可用空间：flex-grow，设为1则平分剩下的空间，不同数字，对剩余空间的分法不同

div:nth-of-type(1){
    flex-grow: 1;
}
div:nth-of-type(5){
    flex-grow: 2;
}

如果大于容器，将随容器缩小：flex-shrink,设为正整数，随浏览器的缩小，元素会快速缩小并且消失

div:nth-of-type(1){
    flex-grow: 1;
    flex-shrink: 3;
}
div:nth-of-type(5){
    flex-grow: 2;
    flex-shrink: 0;//该元素不会缩小
}

一行解决的写法（flex）

flex-basis、flex-grow、flex-shrink

/* Three values: flex-grow | flex-shrink | flex-basis */顺序
flex: 2 2 10%;

练习（Media Queries）

response design：对任何大小的屏幕做出响应。横放和竖放的区别

Media Queries则可解决这个问题，当某些参数改变是，风格也随之变化。

@media(min-width = 800px){
	h1{
		background-color:blue;//当浏览器宽》800px，h1背景为蓝色
	}
}

@media(max-width = 800px){
	h1{
		background-color:blue;//当浏览器宽《800px，h1背景为蓝色
	}
}
@media(orientation:lanscape){
	h1{
		background-color:blue;//当设备横放时， 
	}
}

LongMidnight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS03

CSS盒子模型（CSS Box Model）宽和高（Width &Height）盒子：Width &Height：内容盒子的宽和高div{ width: 200px; height: 250px; background-color: rgb(30, 219, 109);//指挥在content area里面才会有显示}边界和边界角（border & border radius）包含若干属性：圆角，边界颜色，边界厚度边界属性：bord
复制链接

扫一扫