CSS基础学习（3）

爱学习的小超人

发布于 2022-11-14 16:14:52

66700

代码可运行

文章被收录于专栏：SuperXCRMySQLSuperXCRMySQL

运行总次数：0

代码可运行

CSS-定位（一）

1-1 Position-statiic

CSS关键属性—position 修饰全局DOM元素布局

static遵循默认的文档流布局，top,left,right,bottom,属性都无效

Position除了static属性外，，还有

relative (相对定位)
absoulute (绝对定位)
fixed (固定定位)
sticky (粘性定位)

1-2 Position-relative(相对定位)

使用relative(相对定位) 来实现

relative在默认的文档流布局下，进行偏移

.first {
    position: relative;
    left: 50px;
    top: 50px;
}

1-3 Position-absolute(绝对定位)

写为absolute后，改图片将会脱离信息流，其它照片依次向上移动，占据第一张图片位置

MDN解释：

元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并

关键词：

最近和 非static定位 和 祖先元素

步骤

首先获取第一张照片元素发现是absolute布局
找寻父节点< div class=”img-box”> 未配置position ,所以默认为position=static; 不符合非static
继续寻找< div>的父节点，，到< body>
< body >已经没有父节点，所以按照< body>位置为标准进行偏移

1-4 Position-fixed(固定位置)

作用：使一个标题·固定，不随页面的滑动移动

h1 {
    position: fixed;
    padding: 0;
    margin: 0;
    
    left: 30px;
    top: 50px;
    color: yellowgreen;
}
.img-box {
    position: relative;
}

但有时固定文字或图片会被其它元素覆盖

这是因为z-index的大小和代码先后顺序导致

1、默认非static元素的z-index都为0

2、z-index越大，则越在最上面，离观察者越近

3、同样的z-index，在HTML的元素越靠后，则越在最上面

1-5 sticky(粘性定位)

当页面滑动到相应位置时，该段文字或图片，会随着页面滑动而滑动

h1 {
    position: sticky;
    color: yellowgreen;
    top: 50px;
    z-index: 1;
}

CSS-定位（二）

2-1 Float

float 可以使元素靠左或者靠右排版

标签 nav main

nav: 一般用于表示此区块使导航区域

main: 一般用户表示此区块是网页的主体区域

.logo {
    float: right;
    float: left;
}

2-2 定位实战(一) ：模态框

模态框简介；类似于我们登陆时凸显登陆界面，后界面变暗

模态框特点：
1.模态框总是在浏览器的中心，浏览器随意放大缩小，模态框还是在浏览器中心
2.模态框总有一个半透明背景

第一步：完成半透明背景

半透明背景覆盖整个页面

<div class="mask"></div>

.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*通过fixed 再设置上下左右为 0 ，达到覆盖全屏*/
    background-color: rgba(0,0,0,0.7);
}

第二部：完成模态框内部

<div class="modal">
    <img src="https://style.youkeda.com/img/ykd-components/logo.png" />
</div>

.modal {
    background-color: #fff;
    
    width: 300px;
    height: 150px;
    
    border-radius: 20px;
}

.modal > img {
    display: block;
    width: 200px;
    margin: 39px auto;
}

元素居中方法

1.内部是行内元素，可以在父容器使用 text-align: center;
2.内部是块状元素，可以在子容器上使用 margin: 0 auto;(如果不是块状元素，需要设置 display: block;)

元素垂直居中

margin-top = (modal高度 - img 高度) / 2;

第三步：完成模块框布局

.modal {
    position: fixed;
    left: 50%;
    top: 50%;
     background-color: #fff;
    
    width: 300px;
    height: 150px;
    /*由于图片偏左下，所以需要设置负值是图片居中*/
    margin-left: -150px;
    margin-top: -75px;
    
    border-radius: 20px;
}

.modal > img {
    display: block;
    width: 200px;
    margin: 39px auto;
}

2-3 定位实战(二) ：搜索框

第一步：完成搜索框

<div class="rigth">
    <div class="search">
        <input placeholder="搜索你想要的东西" />
        <img 
             src="xxx"
             />
    </div>
    <img 
         class="avatar"
         src="xxx"
         />
</div>

.right {
    float: right;
}

.search {
    float: left;
    margin-rigth: 20px;
    margin-top: 16px;  /* 1 */
}

.search > input {
    width: 220px;
    height: 36px;
    
    font-size: 12px;
    box-sizing: border-box;
    padding: 0 50px 0 15px;
    background-color: #ededed;
    border-radius: 18px;
    
    border: none;
    outline: none;
}

.search > img {
    width: 34px;
    height: 34xp;
}

解释

1.  margin-top: 16px; 是通过计算得出  (nav 高度 -input高度) / 2

为使搜索图标嵌入搜索框内

.search {
    position: realtive;
    ...../*上面有*/
}
.search > img {
    position: absolute;
    right: 10px;
    top: 1px;
    
    width: 34px;
    height: 34px;
}

第二部：完成搜索结果

 <!--在搜索框图片下面-->
<!-- 搜索结果页面 -->
      <ul class="search-result">
        <li>1号</li>
        <li>2号</li>
        <li>3号</li>
        <li>4号</li>
      </ul>
</div>

.serach-result {
    position: absolute;
    left: 0;
    top: 60px;
    
    padding: 0 15px;
    
    background-color: #fff;
    border-radius: 5px;
    
    box-shadow: 0px 1px 11px 0px rgba(0,0,0,0.16);
}

.search-result > li {
    font-size: 12px;
    color: #1f2c41;
    
    height: 36px;
    line-height: 36px;
    
    width: 190px;
    border-bottom: 1px solid #f3f3f3;
}

CSS 背景

3-1 背景颜色

渐变色

background：linear-gradient(to right,#95ca47,#4dc891);
/*指明方向  从什么颜色到什么颜色*/

渐变位置

background: linear-gradient(to right,#95ca47 30%,#4dc891 70%);

3-2 背景图片

给元素设置背景图片，及背景图片一些特性

/*添加图片*/
background-img: url(图片地址);

/*设置背景图片重复*/

background-repeat: bo-repeat;
repeat  /*默认值 在垂直和水平方向进行重复*/
repeat-x /*在水平方向重复*/
repeat-y /*在垂直方向重复*/
no-repeat /*不重复*/

/*居中*/
background-position: center; /*居中   还有top-left top-right等等*/ 
x% y%  /*第一个水平位置  第二个垂直位置  */
xpx  ypx  /*自定义  第一个水平位置  第二个垂直位置  */

高级特性

/*背景撑满整个容器*/

background-size: ;

cover  /*把图像扩展足够大*/

contain /*图像扩展至最大尺寸，完全适应宽度和高度*/

xpx ypx  /*手动设置*/

x% y%

cover 长宽中较小的一方撑满，contain 长宽较大的一方撑满

/*background合并写法*/

background: url(https://style.youkeda.com/img/ykd-components/logo.png)
    no-repeat center / contain;

拓展

background-attachment: ;  fixed local scorll
/*背景图片相对与于视图滑动的设置*/

background-clip: ;   border-box  padding-box content-box  text
/*background-clip  设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。*/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除

c++

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

c++

css

登录后参与评论

0 条评论

热度