【css】-【常考手写】-笔记

已于 2022-08-03 19:32:03 修改
阅读量281 收藏 1
点赞数
分类专栏： 笔记 前端 css 文章标签： css css3 html
于 2022-07-02 22:13:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40852935/article/details/125578255
版权
笔记 同时被 3 个专栏收录
54 篇文章 14 订阅
订阅专栏
前端
28 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

【css】-【常考手写】-笔记

1 三栏布局

1.1 position布局

  • 父元素相对定位，子元素通过绝对定位将左右两栏固定，top/left: 0;
    - 三栏布局，中间一栏最先加载、渲染出来（主要内容）
  • middle通过 margin 设置左右边距，留出内容块
<div class="box">
     <div class="main"></div>
     <div class="left"></div>
     <div class="right"></div>
</div>

在这里插入图片描述

.box {
    position: relative;
}
.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
}
.main {
    margin-left:300px;
    margin-right: 300px;
    text-align:center;
    height: 300px;
}

通过浮动实现的三栏布局的缺点，必须把.main 元素放在最下面而不是中间位置，这是 float 所产生的的布局影响所导致的。

1.2 圣杯模式

  • 首先设置外层box的padding: 0 200px 0 180px;
  • 所有元素都是float，且有一致的高度；
  • main的宽度是100%，所以left和right被“挤”到了第二行
  • 将left放置到之前预留出的位置上，使用margin-left: -100%;
  • 使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置
  • margin-right: -150px; 完成right的放置
<div class="box">
     <div class="main"></div>
     <div class="left"></div>
     <div class="right"></div>
</div>

在这里插入图片描述

        body {
            min-width: 800px; /* 设置页面最小宽度*/
            margin: 0;
        }
        .box {
            padding: 0 200px 0 180px;
            height: 100px;
        }
        .box div {
            float: left;    /* 所有元素向左浮动*/
            height: 100px;	/* 统一高度*/
        }
        .main {
            width: 100%;
        }
        .left {
            width: 180px;		/* (1) 挤在main下面*/
            margin-left: -100%; /* (2) main的最左侧*/
            position: relative;
            left: -180px;		/* (3) 相对自己左移padding-left:180px的距离*/
        }
        .right {
            width: 200px;		/* (1) 挤在main下面,left的右边*/
            margin-left: -200px;/* (2) main的最右侧*/
            position: relative;	
            right: -200px;		/* (3) 相对自己左移padding-right:200px的距离*/
        }

1.3 双飞翼模式

两侧内容宽度固定，中间内容宽度自适应
三栏布局，中间一栏最先加载、渲染出来（主要内容）
实现方式 【浮动+margin负值】

双飞翼布局的DOM结构与圣杯布局的区别是用main仅包裹住main-content，另外将.column类从center移至container上。

<div class="main">
 	<div class="main-content"></div>
</div>
<div class="left"></div>
<div class="right"></div>

在这里插入图片描述

.main {
    float: left;
    height: 100px;
    width: 100%;
}
.main-content {
    margin: 0 200px 0 180px; /* 注释后不影响*/
    height: 100px;
}
.left2 {
    float: left;
    height: 100px;
    width: 180px;
    margin-left: -100%;
}
.right2 {
    float: left;
    height: 100px;
    width: 200px;
    margin-left: -200px;
}

1.4 flex布局

.box{
	display:flex;
}
.left, .right{
    width:200px;
}
.center{
    flex:1;
}

双飞翼布局稍微简单一点，利用

开启浮动+清除浮动
主区域两侧留白【margin】
两侧上去【margin负值】
圣杯布局稍微复杂一点

开启浮动+清除浮动
主区域两侧留白 【padding】
两侧上去【margin负值+相对定位】

2 鼠标移出后，卡片内容消失

<body>
        <header>
            <nav>
                <ul class="nav-ul">
                    <li>
                        <span>客服服务</span>
                        <i class="triangle-down"></i>
                        <ul class="concat-ul">
                            <li>
                                <img src="" alt="">
                                <span>联系客服</span>
                            </li>
                            <li>
                                <img src="" alt="">
                                <span>帮助中心</span>
                            </li>
                            <li>
                                <img src="" alt="">
                                <span>知识产权保护</span>
                            </li>
                            <li>
                                <img src="" alt="">
                                <span>规则中心</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>充值服务</span>
                        <i class="triangle-down"></i>
                    </li>
                </ul>
            </nav>
        </header>
    </body>

<script>
    let div1 = document.querySelector('.div1')
    let div2 = document.querySelector('.div2')
    let timer
    div1.onmousemove = function() {
        div2.style.display = 'block'
    }
    div1.onmouseout = function() {
         timer = setTimeout(() => {
            div2.style.display = 'none'
        },2000)
          
    }
    div2.onmousemove = function() {

    }
    div2.onmouseout = function() {
            div2.style.display = 'none'
    }
</script>

3 水平居中

水平居中：

（1)行内元素：父元素是块级元素，给父元素设置text-align: center;

（2)块级元素：

方案1：分子元素宽度定不定两种情况 :

子元素定宽，给其设置 margin: 0 auto;

子元素不定宽，设置为display: inline-block; 或 display: inline;转换成行内块级/行内元素，再给父元素设置 text-align: center;

方案2：使用定位属性:

父相子绝 
left: 50%; 
margin-left: -50px; 
transform: translateX(-50%);

方案3：使用flex布局：

display: flex; 
justify-content: center;

4 垂直居中：

1）行内元素（文本可行）父亲height：200px; 子元素line-height: 200px;

2）块级元素

方案1：使用定位属性:

 父相子绝 
 top: 50%;  
 margin-top: -50px; 
 transform: translateY(-50%);

方案2：使用flex布局

display: flex; 
align-items: center;

5 垂直水平居中：

方案1：使用定位属性

父相自绝： 
top: 50%; left: 50%;  
margin-top: -50px;  margin-left: -50px;  transform: translate( -50%, -50%);

方案2：使用flex布局

display: flex;
align-items: center; 
justify-content: center;

父亲flex 儿子margin:auto;

方案3：margin: auto;实现绝对定位元素的居中

position: absolute; 
width: 100px; height: 100px;
top: 0; left: 0; right: 0; bottom: 0; 
margin: auto;

6 双栏布局

1）左浮动，右margin
左float: left;，右 margin-left: 300px;

2）左浮动，右hidden。
左float: left;，右 overflow: hidden;

.box {
    height: 100px;
}
.left {
    height: 100px;
    width: 300px;
    float: left;
}
.right {
    height: 100px;
    margin-left: 300px; /* 方法1：左浮动，右margin*/
    overflow: hidden;	/* 方法2：左浮动，右hidden(右边的盒子就变成了一个绝缘的盒子，BFC中治理高度塌陷)*/
}

3）flex实现
在这里插入图片描述

<div class="box">
	<div class="left"></div>
	<div class="right"></div>
</div>

.box {
  height: 20px;
  display: flex;
}
.left {
  height: 200px;
  width: 300px;
}
.right {
  height: 200px;
  flex: 1;    /* 比例设置为1，撑满剩余空间 == flex: 1 1 0%  */
}

2）左浮动，右hidden。

在这里插入代码片
有趣的学习
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端进阶高薪必看-CSS之手写篇
油墨香^-^的博客
03-02 203
父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。，将父级元素设置为相对定位。
CSS手写代码总结
weixin_34221112的博客
03-28 103
在这里说明一下，那个!important这个写法，在IE6以上都是可以认到的。并不是网上所说的IE6不能识别！它能识别到!important，但不能理解它是优先级更高的意思！！！！ ...
[前端面试]手写代码CSS & JS汇总
iChangebaobao的博客
02-08 391
一、手写CSS 两栏布局 要求：垂直两栏，左边固定右边自适应。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
css手写体
Jinzhenjie的博客
08-27 1336
css手写体 font-family: ‘Gabriola’;
高级网站设计师手写代码篇（div+css布局）
04-26
很好的学习实例，大家看看！！！是我写的一个div+css布局的一个例子，方便大家学习
CSS3手写笔记.md
04-14
看黑马视频里面的前端css3笔记，里面主要是讲课老师在课堂上手写的笔记，非常详细，供大家学习，一起交流学习
html，css，js
09-14
这是我自己手写的笔记，以及自己的感悟，内容量比较大，但言简意赅，希望能够帮助到热爱技术的大家
blog-data:储存日常的博客原文
05-31
title 许吉友 - 运维 云原生 Kubernetes List-Watch原理.md kube-controller-manager内置的控制器.md 批量删除Evicted状态的pod.md 架构及原理 Kubernetes调度与资源管理.md Kubernetes调度器调度...手写一款CNI插件.m
leetcode15题-FrontEnd-Notes:做前端学习笔记
07-01
CSS基础 JavaScript基础 手写代码 实现一个axios 实现跨域的几种方式 实战演练 数据结构、算法以及时间、空间复杂度 算法leetCode 字符串 数组 链表 栈 动态规划 其他 框架 Vue React 工程化工具 Webpack Webpack ...
StackOverflow-Dark：:books:适用于Stack Overflow和大多数Stack Exchange网络站点的深色主题
01-31
:artist_palette: 适用于 ， 或手写笔。 :artist_palette: 适用于或xStyle。 然后： :package: 。 支持自动更新。 其他样式 :package: StackOverflow语法主题样式是在StackOverflow上呈现代码块所必需的其他...
BODY background=自适应大小_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
weixin_39692847的博客
11-23 140
1垂直两栏右边固定左边自适应的四种写法<!DOCTYPE html> 2三栏布局中间自适应，左右宽度固定<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
css手写九宫格布局
hong
10-09 368
css手写九宫格布局 能实现九宫格布局的方式有很多种 比如 flex grid table float 等等 下面整理的是flex布局写的 一起看看吧 html部分 实现布局 <body> <div> <ul> <li> 我是1 </li> <li> 我是2 </li> <li> 我是3 </li> <li> 我是4 </li>
分享一个随手写的简单css效果
qq_49175846的博客
04-01 449
随手制作的简单css效果前言效果图代码HTMLCSS介绍推荐Uigradients中国传统配色网站Colordrop 前言  刚刚随手写了一个网页，添加了一点css的效果，虽然没有很惊艳，但个人认为有点意思，所以就立刻分享给大家了，有兴趣的小伙伴快来看看吧！  本页面实现了鼠标放置、离开的动态效果以及渐变色背景的效果！ 提示：本页面实现环境为Chrome浏览器。 效果图 动图测试 代码  代码分为基本的HTML与CSS，下面给出具体代码。 HTML <!DOCTYPE html> &lt
CSS笔记（十）----书写顺序和布局思路
weixin_45904557的博客
03-12 246
前言 因为最近写代码一直都感觉写的很乱，不知所措 查了一下，大家也可以了解一下，让自己的代码写的更专业！！优雅！！成熟稳重高质量！ 一、CSS属性书写顺序 1.布局定位属性： display规定元素生成框的类型 position定位 float浮动 clear清除浮动 overflow内容溢出处理方式 2.自身属性： width宽度 height高度 margin外边距 padding内边距 border边框 background背景 ...
【前端】-【axios】-学习笔记
weixin_40852935的博客
06-13 3018
1.请求方式2.请求参数用来快速搭建REST API 的工具包 10秒快速建一个服务器在线文档: https://github.com/typicode/json-server 2.2.3 使用浏览器访问测试 http://localhost:3000/posts http://localhost:3000/posts/1测试 GET/POST/PUT/DELETEGET query参数 get Params参数 请求体 urlencoded形式 请求体 json形式..................
解决ModuleNotFoundError: No module named ‘tensorflow.contrib‘
weixin_40852935的博客
12-22 2372
d解决另外附带一个常见的版本兼容性问题就是tf.app不能使用的，TensorFlow遇到的bug： ModuleNotFoundError: No module named 'tensorflow.contrib' import tensorflow.contrib.slim as slim 不降级解决： 下载镜像包 pip install --upgrade tf_slim 将 import tensorflow.contrib.slim as slim 改为 import
支持向量机SVM-手写笔记&手动实现
weixin_40852935的博客
11-18 2093
标题接下来用代码来实现它吧~~~~ #!/usr/bin/python # coding=utf8 import sys; import random; import math; EPS = 0.000000001 # 很小的数字，用于判断浮点数是否等于0 def load_data(filename, data, dim): ''' 输入数据格式: label\tindex1:value1\tindex2:value2\tindex3:value3..., 其中index...
【尚品汇】项目笔记
weixin_40852935的博客
06-25 1697
目录分析 文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。文件夹（程序员代码文件夹）:babel配置文件 ：看到项目描述、项目依赖、项目运行指令 : 缓存性文件（各种包的来源） :项目说明文件...................................................
css-in-css
最新发布
02-05
CSS-in-CSS是一种前端开发技术，也被称为CSS嵌套或CSS模块化。它的主要思想是将CSS样式定义在组件级别，使得样式与组件的逻辑和结构紧密关联，提高代码的可维护性和可重用性。 在传统的CSS开发中，样式是全局共享的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值