如何在Laravel中继承Blade布局且不影响页面其余样式？

你可以通过以下几种方式实现让布局中的样式仅作用于页眉和页脚，不影响内容区域：

方法一：给页眉页脚添加专属容器并限定CSS选择器 #

1. 修改layout.blade.php，将页眉、页脚分别包裹在带专属类的容器中：

   <header class="global-header">
       <!-- 原有页眉内容 -->
   </header>
   
   @yield('content')
   
   <footer class="global-footer">
       <!-- 原有页脚内容 -->
   </footer>
   

2. 调整app.css中的样式规则，把原来的全局选择器（如body、p、h*等）都限定在页眉页脚的容器类下：

   /* 修改后仅作用于页眉页脚 */
   .global-header p, .global-header h1, .global-header div,
   .global-footer p, .global-footer h1, .global-footer div {
       font-size: 12px;
       color: #666;
   }
   

   这样全局样式就只会影响页眉和页脚区域，内容区不受波及。

方法二：在内容区添加样式重置容器 #

如果不想改动全局CSS，可以给内容区套一个重置容器，覆盖全局样式的影响：

1. 在你的页面代码中给内容加外层容器：

   @section('content')
       <div class="content-wrapper">
           @include('pages.random')
           <!-- 你的页面内容代码 -->
       </div>
   @endsection
   

2. 在CSS中添加重置规则，恢复内容区的默认样式：

   .content-wrapper {
       font-size: 16px; /* 按需设置你需要的字号 */
       color: #333; /* 按需设置你需要的文字颜色 */
   }
   /* 按需重置其他元素样式，比如段落、标题等 */
   .content-wrapper p {
       font-size: inherit;
       color: inherit;
       margin: 1em 0;
   }
   

方法三：拆分布局样式，仅给页眉页脚引入专属样式 #

把app.css中属于页眉页脚的样式拆分出来，单独管理：

1. 将页眉、页脚的样式提取到header-footer.css文件中，然后在layout.blade.php里仅在对应区域引入，或者直接内联样式：

   <header>
       <link rel="stylesheet" href="{{ asset('css/header-footer.css?'.time()) }}">
       <!-- 页眉内容 -->
   </header>
   
   @yield('content')
   
   <footer>
       <!-- 或者直接内联样式 -->
       <style>
           footer { /* 页脚样式 */ }
       </style>
       <!-- 页脚内容 -->
   </footer>
   

2. 移除layout.blade.php中原来的全局app.css引用，或者只保留不影响内容区的通用样式。

内容的提问来源于stack exchange，提问作者Caleb