1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>常见元素布局</title>
  6.         <style type="text/css">
  7.             /* 一、水平居中布局 */
  8.             /* 1.单个元素水平居中 宽度不固定 缺点：需要涉及到父类的样式*/
  9.             .content {
  10.                 text-align: center;
  11.             }
  12.  
  13.             .box {
  14.                 display: inline-block;
  15.                 color: #fff;
  16.                 background: #0000FF;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div class="content">
  22.             <div class="box">
  23.             宽度不固定
  24.             </div>
  25.         </div>
  26.     </body>
  27. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>常见元素布局</title>
  6.         <style type="text/css">
  7.             /* 一、水平居中布局 */
  8.             /* 2.单个元素水平居中 宽度不固定 缺点：设置为表格元素，内部元素的布局有可能受到影响*/
  9.             .box {
  10.                 display: table;
  11.                 margin: 0 auto;
  12.                 background: #ff9933;
  13.                 color: #fff; /* background和color测试更好的观看效果 */
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div class="content">
  19.             <div class="box">
  20.                 宽度不固定
  21.             </div>
  22.         </div>
  23.     </body>
  24. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>常见元素布局</title>
  6.         <style type="text/css">
  7.             /* 一、水平居中布局 */
  8.             /* 3.单个元素水平居中 宽度不固定 缺点:transform,兼容性较差*/
  9.             .content {
  10.                 position: relative;
  11.             }
  12.  
  13.             .box {
  14.                 position: absolute;
  15.                 left: 50%;
  16.                 transform: translateX(-50%);
  17.                 background: #ff9933;
  18.                 color: #fff; /* background和color测试更好的观看效果 */
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div class="content">
  24.             <div class="box">
  25.                 宽度不固定
  26.             </div>
  27.         </div>
  28.     </body>
  29. </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. 0003_Linux基础之常用命令

    1.pwd:查看当前所在目录 2.cd :切换目录 3.ls:查看当前目录下的文件及文件夹: 4.ls -l :列出当前目录下文件及详细信息         drwxr-xr-x   第一个字符为d则 ...

  2. 连接带密码的access数据库

    在网上找了很多都不靠谱,稀里哗啦的弄一堆连接字符串,很不优雅. 这个方法很简单: 1.在“连接”这页中,下方有“输入登录数据库的信息”用户名:admin,并在下面选择“空白密码” 2.在“所有”这页的 ...

  3. Elasticsearch之match_phrase小坑记录

    1.问题抛出 某个词组在Elasitcsearch中的某个document中存在,就一定通过某种匹配方式把它搜出来. 举例: title=公路局正在治理解放大道路面积水问题. 输入关键词:道路,能否搜 ...

  4. oracle查看监听状态

    产看状态命令:lsnrctl status 启动监听:lsnrctl start 关闭监听:lsnrctl stop LSNRCTL for 32-bit Windows: Version 10.2. ...

  5. 符号分割的字符串转换为XML

    把某一符串分割的字符串转换为 XML格式: DECLARE @str NVARCHAR(MAX) = N'fd,re,45,tyu,976,qwer,gdsg,uyt' DECLARE @xml XM ...

  6. 数据库路由中间件MyCat - 源代码篇（12）

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. NodeList ruleNodes = e.getElementsByTagName("rule ...

  7. 交叉编译调试qemu_guest_agent

    Winodws版本 编译环境Fedora23 下载VSS SDK的setup.exe 下载地址 提取VSS SDK头文件 将下面的代码保存成extract-vsssdk-headers.sh脚本,然后 ...

  8. E20190418-hm

    distinct adj. 明显的,清楚的; 卓越的,不寻常的; 有区别的; 确切的; predicate  vt. 断言,断定; 宣布,宣讲; 使基于; n. 谓语; 述语;

  9. AI决策算法 之 GOAP （三）

    源码地址:http://pan.baidu.com/s/1dFwzmfB 这篇我们使用上篇文章写的GOAP框架来完成一个实例: 实例内容: AI有10HP, 需要去站岗,站岗完成扣5HP 当HP< ...

  10. 1.函数的结构，调用，传参，形参，实参，args,kwargs，名称空间，高阶函数

    1.函数的初识 初始函数 获取任意一个字符串的元素的个数 s1='dsjdkjkfefenga' count=0 for i in s1: count+=1 print(count) 获取列表的元素的 ...