<!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. Windows server 2003+IIS6+PHP5.3 以上的安装配置

    一.安装好IIS 具体安装方法可查看:http://down.chinaz.com/server/201102/11_1.htm. 二.下载并安装IIS FastCGI 下载地址:http://www ...

  2. USB相关资料

    http://www.usb.org/developers/defined_class/#BaseClass00h http://blog.csdn.net/lizzywu/article/detai ...

  3. 第一课、OpenGL绘制直线等等

    第一课.OpenGL绘制直线等等 分类: [开发技术]OpenGL 2012-01-18 14:59 5217人阅读 评论(0) 收藏 举报 buffer图形c // //  main.c //  o ...

  4. Ubuntu 14.04中修复默认启用HDMI后没有声音的问题

    声音问题在Ubuntu中是老生常谈了.先前我已经在修复Ubuntu中的“无声”问题一文中写到了多种方法,但是我在此正要谈及的声音问题跟在另外一篇文章中提到的有所不同. 因此,我安装了Ubuntu 14 ...

  5. HDU - 6082 度度熊与邪恶大魔王（背包变式）

    度度熊与邪恶大魔王 度度熊为了拯救可爱的公主,于是与邪恶大魔王战斗起来. 邪恶大魔王的麾下有n个怪兽,每个怪兽有a[i]的生命值,以及b[i]的防御力. 度度熊一共拥有m种攻击方式,第i种攻击方式,需 ...

  6. null, undefined 和布尔值

    说明:此类博客来自以下链接,对原内容做了标注重点知识,此处仅供自己学习参考! 来源:https://wangdoc.com/javascript/basic/introduction.html 1.n ...

  7. CV codes代码分类整理合集 《转》

    from:http://www.sigvc.org/bbs/thread-72-1-1.html 一.特征提取Feature Extraction:   SIFT [1] [Demo program] ...

  8. 散列表(Hash table)及其构造

    散列表(Hash table) 散列表,是根据关键码值(Key value)而直接进行访问的数据结构.它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函数叫做散列函数,存放记录 ...

  9. python列表逆序三种方法

    栗子: # 题目:将一个数组逆序输出. # # 程序分析:用第一个与最后一个交换. import random list =[random.randint(0,100) for _ in range( ...

  10. centos7及以上安装git服务

    检查git是否安装或者是版本 whereis git等命令来检查是否已经安装了git版本的 git --version检测到我的环境自带的git版本 已安装但不是想要的版本需要卸载 yum remov ...