Css总结++图片在div中居中的方式

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jdzw_xcy/article/details/80660975

   在Css样式中图片(文字)居中的方式:

            ①使用父子选择器

                    .style1{

                                    text-align:center;

                    }

                    .style1 img{

                                    magin-top: xx px (设置自己需要的像素)

                    }

            ②在Html中使用table的方式

                         设置一行一列

                                <div class = "xxx">

                                        <table width = "100%"  align = "center" valign ="middle">

                                                <tr>

                                                        <td><img src = "xxx" /></td>

                                                </tr>

                                        </table>

                                </div>

<link  href=”xxx/xxx/xx.css” type = “text / css” rel = “stylesheet”

CSS样式的引入

 总结:

CSS的三种选择器:

        (1”  .选择器名称   就是一个类选择器

        (2“  #选择器名称   就是一个ID选择器

                          3”  body          html的选择器

            (id>>html

            (4)  父子选择器:  

                    #style span{

            属性名 属性值;

                                    }

 

                <head>

 

        样式的定义:<style = “text/css”>

                                                                 .#)类选择器名称{      ‘点’是类选择器  #id选择器’

                                属性名: 属性值;   (等等)

                                                                                                }

                                             </style>

 

                                    img {

                                            filter:gray

                                            }

 

                                    a:link img {

                                                    filter:gray;超链接默认情况下灰色(img这个图)

                                                    }

                                    a:hover img{

                                                        filter:””

                                                        }

                        </head>

 

<body>

<元素名  class = “style1” >  

class是类选择器  id id选择器)

元素名可以是HTML中的任意元素的名称

引用上面设置的CSS样式(注意不能带‘点’)

</span>

 

<img  src = “xx” />    上面对应的img设置会对其做出处理

<a><img  src = “xx” /></a>

 

        ★行内元素和块元素

                1. 行内元素:只占内容宽度,不会自动换行(span

                    一般放文本或者其他行内元素

                2. 块元素:不管内容多少,都会换行并且占满一行(div

                    一般存放行内元素,文本,块元素

                3. 行内元素和块元素是可以互换 display:block行内元素>块元素    display:inline块元素>行内元素

        ★标准流流,非标准流,盒子模型

                1. 标签的排列方式。先排先显示-->标准

        2. ★★★盒子模型:层层嵌套。{

                1) 每一个元素都可以看作一个盒子

                2) 参照物不同 CSS属性不同

                3) 尽量使用marginPadding会破坏盒子大小

                        ①边界层: margin

                        ②边框层: border

                        ③填充层: padding

                        ④填充层: content

                    }

(1)每个div模块之间的距离就称margin

(2)div模块边界与内部元素的距离成为padding(上下左右)

(3)模块边框多粗是用border

(4)模块内部的元素为content

Margin padding 在设计的CSS样式中设定。

 

Border(边框):边框线的类型有九个确定值:none(无边框线)、 dotted(由点组成的虚线)、 dashed(由短线组成的虚线)、 solid(实线)、 double(双线,双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度)、 groove(3D沟槽状的边框)、 ridge(3D脊状的边框)、 inset(3D内嵌边框,颜色较深)、 outset(3D外嵌边框,颜色较浅)

浮动(float):左右浮动,清除浮动。

  右浮动:向模块右边浮动按照标准流的形式,碰到父元素边界的时候停止 </body>


展开阅读全文

没有更多推荐了,返回首页