<!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. linux命令:gzip命令

    减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...

  2. 【243】◀▶IEW-Unit08

    Unit 8 Environment I. 不定式(to do)在雅思写作中的运用 1)名词 • 主语(句首) To protect the environment is everyone's dut ...

  3. <c和指针>学习笔记1之快速上手和基本概念

    1 c语言中的注释 功能:使这段代码在程序中不起作用,当然如果是功能注释,那是方便其他人阅读您的代码. 大部分情况下,多行的注释,我们采用的是这种方式,例如  /*内容*/. 这个符号不能嵌套,也就是 ...

  4. linux中syslog自定义存储路径的方法

    方法一: 1. su  //切换到root用户下2. cp /etc/sysconfig/rsyslog /etc/sysconfig/rsyslogbak //备份vim /etc/sysconfi ...

  5. 文本主题抽取：用gensim训练LDA模型

    得知李航老师的<统计学习方法>出了第二版,我第一时间就买了.看了这本书的目录,非常高兴,好家伙,居然把主题模型都写了,还有pagerank.一路看到了马尔科夫蒙特卡罗方法和LDA主题模型这 ...

  6. appium自动化测试框架——在python脚本中执行dos命令

    一般我们运行dos命令,会有两种需求,一种是需要收集执行结果,如ip.device等:一种是不需要收集结果,如杀死或开启某个服务. 对应的在python中就要封装两种方法,来分别实现这两种需求. 1. ...

  7. oracle rownum(转)

    对于Oracle的rownum问题,很多资料都说不支持>,>=,=,between……and,只能用以上符号(<.& lt;=.!=),并非说用>,>=,=,be ...

  8. vue中的导航守卫

    官方文档地址: 导航守卫:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好的,重点内容 router.beforeEac ...

  9. [Java]ArrayList、LinkedList、Vector、Stack的比较

    一.介绍 先回顾一下List的框架图 由图中的继承关系,可以知道,ArrayList.LinkedList.Vector.Stack都是List的四个实现类. AbstractList是一个抽象类,它 ...

  10. Codeforces 190C（模拟）

    坑点 不记它难解我心头之恨-- WA1:不要读错题Orz,顺序是按它给定的.那就是个类似栈的东西,重点在于输出. 然而我输出很快就模拟对了-- WA2:数据:1 int.我日了不看数据我真的去de模拟 ...