内容回顾

  • 表单标签

    • input

      • type

        • text 普通的文本

        • password 密码

        • radio 单选  默认选中添加checked

          • 互斥的效果 给radio标签添加 相同的name

        • checkbox 多选

        • submit 表单提交按钮

        • button 普通的按钮

        • reset 充值按钮

      • name  会被封装到请求体中的key

      • value  是标签显示的内容,会被封装到请求体中的value

    • select

      • name 会被封装到请求体中的key

      • 子元素一定是 option

        • value  是标签显示的内容,会被封装到请求体中的value

        • selected 默认选中的状态

    • textarea

      • name

      • value

      • rows  行数 决定了它的高度

      • cols  列数 决定了它的宽度

  • css的三种引入方式

    1. 行内样式  它的权重是最高的

    <div style = 'width:200px;color: red;'>
    
    alex
    
</div>

    ​    2.内接式

    <head>
    
    <style>
    
        div{
    
            color:red;
    
        }

    </style>
    
</head>

    ​    3.外接式

    <head>
    
    <link rel="stylesheet" href="./index.css"/> </head>

  • 选择器

    • 基本选择器

      种类种类 语法 作用
      标签选择器 div{} 选中页面中所有的div标签,选的共性
      类选择器 .box{} 找的是'共性'的元素,class可以重复,又可以设置多个
      id选择器 #box{} 找的是'特性'的标签,它是唯一,通常是与后面的js有很大关系
      统配符选择器 *{} 不建议在工作中使用,可以拿着做测试.重置样式库:https://meyerweb.com/eric/tools/css/reset/

    • 高级选择器

      种类 语法 作用
      后代选择器 div p{} 选取后代(所有的孩子)的元素
      子代选择器 div>p{} 选取亲儿子的元素
      组合选择器 div,p,a,span{} 多个标签选择器组合,构成了组合选择器
      交集选择器 div.atcive 前面是标签选择器,第二个是类选择器

    • 伪类选择器 '爱恨准则  LoVe HAte'

      种类 作用  
      a:link{} 没有被访问过的样式  
      a:visited{} 访问过后的样式  
      a:hover 悬浮时的样式  
      a:active 摁住的时候的样式  

    • 权重的问题

      • 数 id   类  标签的数量

      • 行内样式 1000  > id 100 > 类 10 > 标签 1

今日内容

盒模型

​ 概念:

​

​ 属性:

  • width 内容的宽度

  • height 内容的高度

  • padding  内边距  内容到边框之间的距离

    • 背景色也被填充

  • border  边框

  • margin 外边距

    需求: 做一个302*302的盒子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*有多种方法*/

        .box{

            width: 200px;

            height: 200px;

            /*四个方向全部设置*/

            padding: 50px;

            border: 1px solid red;

            background-color: darkslateblue;

        }

    </style>

</head>

<body>

<!--做一个302*302的盒子-->

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

​

</body>

</html>

盒模型的计算

​ 如果保证盒模型不变,当加padding,就要对盒模型的宽或者高减,保证盒模型的不变

​ 通过padding能调整子内容的位置,对于padding来说,通常描述的是父子之间的距离

width

定义:内容的宽度

height

定义:内容的高度

padding

定义:内边距 内容到边框之间的距离

  
.container{

            width: 200px;

            height: 200px;

            background-color: darkgoldenrod;

            /*一个值  四个方向都有值*/

            /*padding: 30px;*/

            /*两个值:上下  左右*/

            /*padding: 20px 30px;*/

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

            /*padding: 30px 20px 40px;*/

            /*四个值: 上 右 下 左 顺时针*/

            padding: 20px 30px 40px 50px;

  }

四个方向单独设置

padding-top: 20px;

padding-right: 30px;

padding-bottom: 40px;

padding-left: 50px;

border

定义:盒子的边框





.box{

            width: 300px;

            height: 300px;

            background-color: darkgoldenrod;

            /*border: 1px solid darkred;*/

​

            /*根据方向来设置属性*/

            /*border-left: 1px solid darkred;*/

            /*border-right: 5px dotted darkgoldenrod;*/

            /*border-top: 10px double darkblue;*/

            /*border-bottom: 1px solid greenyellow;*/

            /*根据三要素*/

            /*border-width: 5px 10px 1px;*/

            /*border-style: solid double dashed;*/

            /*border-color: red yellow darkcyan darkgray;*/

            /*border: 0;*/

            border-radius: 50%;

        }




制作小三角






.sanjiao{

            width: 0px;

            height: 0px;

            border-left: 50px solid transparent;

            border-bottom: 50px solid green;

            border-right: 50px solid transparent;

        }




margin


定义:外边距 一个盒子到另一个盒子的距离


前提条件是: 标准文档流下


  • 水平方向上 不会出现问题
    • 

  • 垂直方向上: 会出现塌陷问题,我们以后再布局页面的时候设置一个方向,而不要设置两个方向


让标准文档流下的盒子居中




/*让盒子居中*/

            /*margin-right: auto;*/

            /*margin-left: auto;*/

            margin: 0 auto;




浮动


​ 要浮动一起浮动,另外 有浮动清除浮动


浮动的好处:


​ 浮动实现元素并排


浮动的现象:


  • 脱标
    • 

  • 字围效果
    • 

  • 如果标签一旦浮动,就不区分行内标签还是块级标签,可以任意设置宽高
    • 

  • 贴边现象


浮动带来的问题


​ 如果父盒子没有设置高度,子盒子都设置浮动,(脱标了,不在文档上占位置) 撑不起父盒子的高度


清除浮动


  • 给父盒子设置固定高度
    • 

  • 内墙法
    

    • 在最后一个浮动元素的后面添加一个空的块级的标签,给这个标签设置类名clearfix
      • 

    • .clearfix{
          clear:both;
          
      }
      • 

    • 代码冗余


CSS居中补充






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .father{

            width: 100%;

            height: 200px;

            background-color: green;

        }

        .active{

            width: 400px;

            height: 80px;

            margin: 0 auto;

            background-color: yellow;

        }

        .box{

            width: 400px;

            height: 80px;

            background-color: red;

            text-align: center;

            line-height: 80px;

            float: left;

        }

    </style>

</head>

<body>

<div class="father">

    <div class="active">

        <div class="box">alex</div>

    </div>

</div>

</body>

</html>






绝对定位的盒子的居中






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .father{

            width: 300px;

            height: 400px;

            background-color: red;

            position: relative;

        }

        .box{

            width: 40px;

            height: 40px;

            background-color: green;

            position: absolute;

            left: 50%;

            margin-left: -20px;

        }

        /*属性选择器*/

        input[type='text']{

            font-size: 20px;

        }

        ul li:first-child{

            color: red;

        }

        ul li:last-child{

            color: greenyellow;

        }

        ul li:nth-child(4){

            color: deepskyblue;

        }

        ul li:nth-child(4n+1){

            color: orange;

        }

    </style>

</head>

<body>

    <div class="father">

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

    </div>

    <input type="text">

    <input type="password">

    <input typeof="submit">

    <ul>

        <li>1</li>

        <li>1</li>

        <li>1</li>

        <li>1</li>

        <li>1</li>

        <li>1</li>

    </ul>

</body>

</html>




												


											
Day041--CSS, 盒模型, 浮动的更多相关文章
	

    
						
  1. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
		
    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
    
		
    2. 
						
  2. CSS盒模型
		
    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
    
		
    3. 
						
  3. 第 16 章 CSS 盒模型[下]
		
    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...
    
		
    4. 
						
  4. 7.css盒模型
		
    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
    
		
    5. 
						
  5. CSS盒模型和定位的类型
		
    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
    
		
    6. 
						
  6. 第七十三节，css盒模型
		
    css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 CSS盒模型中 ...
    
		
    7. 
						
  7. CSS盒模型的深度思考及BFC
		
    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...
    
		
    8. 
						
  8. 面试汇总——说一下CSS盒模型
		
    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一.  ...
    
		
    9. 
						
  9. CSS盒模型的介绍
		
    CSS盒模型的概念与分类      CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...
    
		
    10. 
						
  10. 详解CSS盒模型
		
    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. AjaxPro2完整入门教程
			
    一.目录 简单类型数据传送(介绍缓存,访问Session等) 表类型数据传送 数组类型数据传送(包含自定义类型数据) 二.环境搭建 1.这里本人用的是VS2012. 2.新建一个空的Web项目(.NE ...
    
			
    2. 
						
  2. crosstool-ng-1.22.0搭建开发环境
			
        Ubuntu16.04无法安装libtool,只能在Ubuntu14.04以下版本安装. cp 下载/crosstool-ng-1.22.0.tar.bz2 /home/hou/ tar -x ...
    
			
    3. 
						
  3. laravel整理笔记（一）
			
    安装laravel5.8.3需要的环境 PHP >= 7.1.3 PHP OpenSSL 扩展 PHP PDO 扩展 PHP Mbstring 扩展 PHP Tokenizer 扩展 PHP X ...
    
			
    4. 
						
  4. Clion 配置
			
    plugins: one dark theme font : fira code retina
    
			
    5. 
						
  5. Spring Security（三十七）：Part IV. Web Application Security
			
    Most Spring Security users will be using the framework in applications which make user of HTTP and t ...
    
			
    6. 
						
  6. 在Fabric ChainCode中导入第三方包（以状态机为例）
			
    在企业级应用开发中,经常会涉及到流程和状态,而有限状态机(FSM)则是对应的一种简单实现,如果复杂化,就上升到Workflow和BPM了.我们在Fabric ChainCode的开发过程中,也很可能涉 ...
    
			
    7. 
						
  7. 洛谷 P1091 合唱队形
			
    \[传送门在这里呀\] 题目描述 \(N\)位同学站成一排,音乐老师要请其中的\((N-K)\)位同学出列,使得剩下的\(K\)位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次 ...
    
			
    8. 
						
  8. 将List按照指定大小等分的几种实现方式和效率对比及优化
			
    今天碰到一个需求,定时任务,批量从表里取数据并做一些其他操作然后再存表,每次取1000条,由于计算过程比较耗时所以要起多个线程同时跑,需要将List按照指定大小等分,如每100条数据起一个线程,若最后 ...
    
			
    9. 
						
  9. sigsuspend()阻塞：异步信号SIGIO为什么会被截胡？
			
    关键词:fcntl.fasync.signal.sigsuspend.pthread_sigmask.trace events. 此文主要是解决问题过程中的记录,内容有较多冗余.但也反映解决问题中用到 ...
    
			
    10. 
						
  10. .NET Core 项目指定SDK版本
			
    一. 版本里的坑 自从 .NET Core 2.1.0版本发布以后,近几个月微软又进行了几次小版本的发布,可见 .NET Core 是一门生命力非常活跃的技术.经过一段时间的实践,目前做 ASP.NE ...
    
			
    11.