<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 1.单个元素水平居中 宽度不固定 缺点：需要涉及到父类的样式*/

            .content {

                text-align: center;

            }

            .box {

                display: inline-block;

                color: #fff;

                background: #0000FF;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

            宽度不固定

            </div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 2.单个元素水平居中 宽度不固定 缺点：设置为表格元素，内部元素的布局有可能受到影响*/

            .box {

                display: table;

                margin: 0 auto;

                background: #ff9933;

                color: #fff; /* background和color测试更好的观看效果 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                宽度不固定

            </div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 3.单个元素水平居中 宽度不固定 缺点:transform,兼容性较差*/

            .content {

                position: relative;

            }

            .box {

                position: absolute;

                left: 50%;

                transform: translateX(-50%);

                background: #ff9933;

                color: #fff; /* background和color测试更好的观看效果 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                宽度不固定

            </div>

        </div>

    </body>

</html>

效果：

pc端常见布局---水平居中布局 单元素不定宽度的更多相关文章

  1. pc端常见布局---水平居中布局 单元素定宽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. pc端常见布局样式总结（针对常见的）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. pc端常见布局---垂直居中布局 单元素不定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. pc端常见布局---垂直居中布局 单元素定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. pc端布局的一点思考

    编写pc端页面需要注意些什么? 1.自适应最小屏幕,在小屏幕上样式不能错乱. 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例,日常pc端开发我们会考虑到适配1024宽度大小的屏幕. 对于管 ...

  6. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  7. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  8. 在前端眼中pc端和移动的开发区别

    按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...

  9. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

随机推荐

  1. Silverlight 5 系列学习之一

    最近公司要用Silverlight 开发并且使用了5 ,以前只学过WPF 没看过Silverlight ,不过在争光中国看了看其概念原来如此.它只不过是轻量级的WPF,且目标在于跨浏览器及平台.费话少 ...

  2. 塞尔达：旷野之息个人对比上古卷轴V：天际

    上古卷轴5是我之前玩过最优秀的作品.玩塞尔达的时候就有跟上古卷轴5比对,真的都是神作.两个游戏的自由度都是真的高. 主线剧情上,老滚5印象不深了,当时就知道战斗,只记住了开头砍头现场,还有奥杜因这个龙 ...

  3. Linux打开防火墙telnet端口

    检查端口情况:netstat -an | grep 22 关闭端口号:iptables -A INPUT -p tcp --drop 端口号-j DROP                    ipt ...

  4. CSP 的有用资料

    具体请参考: http://software-security.sans.org/downloads/appsec-2014-files/building-a-content-security-pol ...

  5. oracle查看表，索引，视图，存储过程的定义

    通过  DBMS_METADATA  包 Oracle 的在线文档,对这个包有详细说明: DBMS_METADATA 通过该dbms_metadata包的get_ddl()方法,我们可以查看表,索引, ...

  6. Sharepoint2013搜索学习笔记之设置sharepoint网站内容源(五)

    第一步,进入管理中心,点击管理应用程序,点击search service 应用程序进入到搜索管理配置页面,点击内容源 第二步,点击新建内容源,给内容源命名,在爬网内容类型中选sharepoint网站, ...

  7. win10怎样彻底关闭windows Defender

    首先,我们在电脑中需要进入注册表编辑器进行修改,win10电脑进入windows Defender可以有两种方式,第一种是通过电脑自带的小娜进入,第二种则是常规的win加r.   不管使用哪种方式,首 ...

  8. 洛谷P3431 [POI2005]AUT-The Bus

    P3431 [POI2005]AUT-The Bus 题目描述 The streets of Byte City form a regular, chessboardlike network - th ...

  9. 黑马旅游网配置 pom.xml

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  10. JSONPath中的表达式

    在JsonPath中使用表达式是一个非常好的功能,可以使用简洁和复杂的JsonPath.JsonPath中的表达式基本上是评估为布尔值的代码片段.基于结果,仅选择满足标准的节点.让我们看一下它的更多内 ...