CSS笔记

作者: 手指乐 | 来源:发表于2019-10-04 15:42 被阅读0次
  • visibility:hidden;---隐藏并占位 visible--默认值,可见
    display:none;--隐藏,不占位

  • 用百分比的方式做屏幕适配
    以下代码在不同屏幕表现不一样,可能是一行显示3个div,也可能是三行,每行各显示一个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
            float: left;
        }
        .box1{
            width: 200px
        }
        .box2{
            width: 300px
        }
        .box3{
            width: 500px
        }
    </style>
</head>
<body>
       <div class="box1">box1</div>
       <div class="box2">box2</div>
       <div class="box3">box3</div>
     
</body>
</html> 

改用百分比方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
            float: left;
        }
        .box1{
            width: 20%;
        }
        .box2{
            width: 30%;
        }
        .box3{
            width: 50%;
        }
    </style>
</head>
<body>
       <div class="box1">box1</div>
       <div class="box2">box2</div>
       <div class="box3">box3</div>
     
</body>
</html>

无论多大屏幕都是两行(box1和box2有边框,所以加起来超过50%,所以box3会另起一行)

  • margin:auto并不能使inline或inline-block居中,只对block有效
  • float会脱离文档流,后面的元素会占据它的位置,但是它不能占据前面的元素的位置

相关文章

  • CSS 自学笔记(中)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 继承、层叠和特殊性 继承 CSS...

  • CSS 自学笔记(上)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 1. 简介 CSS 是层叠样式表...

  • CSS 自学笔记(下)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 代码简写 布局缩写 paddin...

  • CSS学习笔记(2018-07-29)

    CSS学习笔记 CSS 指层叠样式表 (Cascading Style Sheets) CSS语法 CSS 规则由...

  • js操作样式

    CSS HTML 笔记

  • CSS入门学习笔记

    CSS学习笔记 CSS= 层叠样式表 cascading style sheets HTML 表达结构 , CSS...

  • CSS_基础

    初探css,了解个大概,本文主要是对"zhaolion:CSS入门笔记 - 初识CSS"的简要记录 CSS的好处 ...

  • CSS知识点整理

    写在前面:这是一篇学习CSS的笔记。重点在于罗列CSS的知识点。 CSS ㈠ CSS入门 什么是CSS?CSS 指...

  • MDC-css教程——基础知识

    笔记类文章 完全摘录自 MDN-css 什么是css Cascading Style Sheets css 并非仅...

  • HTML&CSS&JavaScript基本介绍

    本文内容为慕课网学习笔记。 CSS CSS样式类型 内联式css样式,直接写在现有的HTML标签中 嵌入式css样...

网友评论

      本文标题:CSS笔记

      本文链接:https://www.haomeiwen.com/subject/vjkspctx.html