CSS3——盒模型

    • 盒模型
        • display属性值
        • inline
        • block
        • inline-block
        • inline-table
        • list-item
        • run-in
        • compact
      • 表格类型
        • table
        • table-row
        • table-cell
        • thead
        • caption
      • none


盒模型:

可以理解为一块块的区域,比如div


display属性值:

通过设置display的属性值操作盒模型

inline:

类似于自适应,例如:span,a的默认样式

block:

类似于充满,例如:div,p的默认样式

上述两个属性的简单测试

<div style="background-color: green">我是divdiv>
<span style="background-color: red">我是spanspan>

inline-block:

可用于水平菜单的实现

测试代码

......

<style>
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            padding: 10px 20px;
            background-color: #2292ff;
            border-right:solid 1px #2066c7;
            width:100px;
            text-align: center;
            /*下面两个属性与display的inline-block属性相比*/
            /*list-style: none;
            float: left;*/
            /**/
            display: inline-block;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    style>

......

<ul>
    <li><a href="#">首页a>li>
    <li><a href="#">首页a>li>
    <li><a href="#">首页a>li>
    <li><a href="#">首页a>li>
    <li><a href="#">首页a>li>
    <li><a href="#">首页a>li>
    <li><a href="#">首页a>li>
ul>

......

inline-table:

实现表单与其他内容(例如文字)位置的改变,类似于word中对图片布局的改变

测试代码


......

<style>
        table{
            display: inline-table;
            border: solid 3px #cccccc;
            /*此案例中改变的是文字的位置*/
            vertical-align: bottom;
        }
        td{
            border: solid 3px #000000;
        }
    style>

......

<body>
文字1
<table >
    <tr>
        <td>1td>
        <td>2td>
        <td>3td>
    tr>
    <tr>
        <td>1td>
        <td>2td>
        <td>3td>
    tr>


table>
文字2
body>

......

list-item

将div转化成list样式

测试代码


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        div{
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
        }
    style>
head>
<body>
<div>list-itemdiv>
<div>list-itemdiv>
<div>list-itemdiv>
<div>list-itemdiv>
<div>list-itemdiv>
<div>list-itemdiv>
<div>list-itemdiv>
<div>list-itemdiv>
body>
html>

run-in

run-in类型的元素将被包括在后面的block类型的元素的内容


compact

compact类型的元素将被放置在block类型的元素左边


表格类型

将div等转化成类似于表格的形式,改变display的属性值

table

类似于将div变成表格

table-row

类似于将div变成表格的一行,

table-cell

类似于将div变成表格的

thead

类似于将div变成表格的表头

caption

类似于将div变成表格的标题


none

不显示

你可能感兴趣的:(JavaWeb,inline,block,list-item,盒模型,css3)