zoukankan      html  css  js  c++  java
  • 第六章 盒子模型

    一.边框
    	
    	1.边框颜色		
    		border-color	边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)
    		
    	2.边框粗细		
    		border-width	边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序)
    		
    	2.边框样式		
    		border-style	边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序)
    		
    二.外边距
    	1.margin   盒子距离浏览器的距离		(可以设置上外边距,如:margin-top,也可以整体设置,但是要注意顺序)
    	
    	2.居中	margin: 0px auto
    
    三.内边距	
    	1.padding   内容到盒子的距离		(可以设置上内边距,如:padding-top,也可以整体设置,但是要注意顺序)
    	
    
    四.盒子模型的尺寸
    	
    	尺寸默认:padding+margin+wigth+border
    	
    	box-sizing	方便计算盒子模型尺寸(默认为content-box,border-box代表随着内容的宽度高度变化而变化)
    
    五.圆角
    	
    	border-radius	圆角(左上,右上,右下,左下)
    	/*如果想要一个圆,那么必须满足宽和高一致,圆角取宽度或者高度的二分之一*/
    	/*如果想要半圆,那么必须满足宽是高的2倍,圆角取宽度的二分之一*/
    	/*如果想要四分之一圆,那么必须满足宽和高相等,圆角取宽度相等值*/
    	
    六.盒子阴影
    	box-shadow	默认为外阴影,内阴影为inset
    	box-shadow: 5px -5px 20px black;
    

      

  • 相关阅读:
    DevCon 5 2019 活动照片
    区块链小册 | 必知的运营常识
    区块链小册 | 必知的运营渠道
    产品经理需求沟通的艺术
    作为产品经理要如何面对失败?
    展示亚洲金融科技状况的 15 张金融科技地图
    成为区块链行业的产品经理是什么感觉
    腾讯产品经理能力模型
    jQuery 知识点大纲
    call()与apply()区别
  • 原文地址:https://www.cnblogs.com/dabrk/p/9895559.html
Copyright © 2011-2022 走看看