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

     ## 盒子的概念: ##

    (1) 是CSS控制页面的一个重要的概念,只有很好掌握了盒子模型以及其中每个元素用法才能真正控制好页面中的各个元素;

    (2)在CSS中,一个独立的盒子模型有:content(内容)、border(边框)、padding(内边距)、和margin(外边距);

    (3)width和height属性只能应用于元素内容区域。

    边框:border

    border-style:规定边框的样式
    border-width:边框宽度
    border-color:边框颜色

    eg:  border: 1px #000000 solid;


    外边距:margin

    外边距是围绕在元素边框之外的可选区域,有matgin-top、margin-right、margin-left、margin-bottom。

    内边距:padding

    内容与边框之间的距离,有padding-top、padding-right、padding-left、padding-bottom。
    eg:padding:50px(只有一个值表示上下左右都有50px的距离)
        padding: 50px 100px(有两个值时,第一个值表示上下的距离;第二个表示左右);
        padding:50px 30px 100px(有三个值时,分别标书上,右左,下)
        padding:50px 10px 100px 50px(有四个值时,分别是以顺时针的方式读取)


        如何在XHTML文档中加入CSS
    1. 外部样式表(行内样式)
    #
        <link rel = "stylesheet" type = "text/css" href = "样式表的URl"
            
    2.嵌入样式表
    #   <head>
        <style>
            * {
                magin:0;
                padding:0;
            }
        </style>    
        </head> 
       
    3.内联样式表 
    #  <body>
        <div style = "样式"></div>
    </body> 

    选择器
    1. 交集选择器
    2. 并集选择器
    3. 后代选择器


    权值:元素:1;class:1

  • 相关阅读:
    不同地区Android开发者使用哪些设备测试APP?
    IIS6、IIS7.5设置网站默认首页方法(Directory Listing Denied)
    大数据正在改变我们的生活
    如何在MySQL中使用explain查询SQL的执行计划?
    整合spring cloud云架构
    对SQL 优化,提升性能!
    传统分布式架构如何进行容器化升级
    Android开发实践:Android.mk模板
    如何从代码层面优化系统性能
    德国又出超实用的厨房神器
  • 原文地址:https://www.cnblogs.com/shy-z/p/4753390.html
Copyright © 2011-2022 走看看